将滚动事件从父容器传播到子容器

Question

I'm going to split the page in 2 columns, sometimes the left column will have an overflow, and the right column will not. The right column would be the Parent, the left column is an overflow child.

---

 .parentDiv { background-color: red; } .childDiv { background-color: green; height: 100px; width: 300px; overflow-y: scroll; overflow-x: scroll; } 

 <div class="parentDiv"> scrolling in this area should scroll the inner overflow div <br> scrolling in this area should scroll the inner overflow div <br> scrolling in this area should scroll the inner overflow div <br> scrolling in this area should scroll the inner overflow div <br> scrolling in this area should scroll the inner overflow div <br> scrolling in this area should scroll the inner overflow div <br> <div class="childDiv"> this should scroll only form outside and inside<br> this should scroll only form outside and inside<br> this should scroll only form outside and inside<br> this should scroll only form outside and inside<br> this should scroll only form outside and inside<br> this should scroll only form outside and inside<br> this should scroll only form outside and inside<br> this should scroll only form outside and inside<br> this should scroll only form outside and inside<br> v this should scroll only form outside and inside<br> </div> </div> 

---

I set up a similar scenario here: http://jsfiddle.net/y1byh25d/1/

Basically, i want to capture scroll events in the red area, and cause the green overflow container to scroll. It's a bit of weird one.

Answer 1

I think i have it figured out :). Here is the JSFiddle

$(".parentDiv").on("wheel", function(e){});

detects when a scroll over the parent div happens

if(e.originalEvent.deltaY < 0 && scroll > 0) {
    scroll -= 10;
    }
    else if(e.originalEvent.deltaY > 0 && scroll < maxScroll){
        scroll += 10;
    }

some conditional logic that detects if the user is scrolling up or down. It also checks if the child div can be scrolled any further up/down. Then if those conditions are met it modifies the values that will be assigned to scrollTop().

$(".childDiv").scrollTop(scroll);

New scroll value is applied to the child div and it scrolls.

.childDiv{
    overflow-y: hidden;
}

Apply overflow: hidden; because it's the easiest way to disable scrolling of the childDiv.

That's all! Here is the complete code used, keep in mind this is using jQuery and thus needs to be enabled to use the script.

html

<div class="parentDiv">
    <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>

    </p>
    <div class="childDiv">
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        v
        this should scroll only form outside and inside<br>
    </div>
</div>

css

.parentDiv
{
  background-color: red;
}

.childDiv
{
  background-color: green;
    height: 100px;
    width: 100%;
    overflow-y: hidden;
}

jQuery

var scroll = 0;
var maxScroll = $(".childDiv").prop('scrollHeight')-$(".childDiv").height();
$(".parentDiv").on("wheel", function(e){
    if(e.originalEvent.deltaY < 0 && scroll > 0) {
    scroll -= 10;
    }
    else if(e.originalEvent.deltaY > 0 && scroll < maxScroll){
        scroll += 10;
    }
    $(".childDiv").scrollTop(scroll);
});

Answer 2

Based on the answer by RMo, i made a small change for this to behave properly with smooth scrolling, such as on macs.

//enable event listener only when needed.
    $scope.$watch('$root.fpo.scrollLocked', function() {
        if(true === $scope.$root.fpo.scrollLocked)
        {
            $parent.on("wheel", function(e) {
                maxScroll = $container.prop('scrollHeight')-$container.height();

                if(e.originalEvent.deltaY < 0 && scroll > 0) {
                    scroll += e.originalEvent.deltaY;
                }

                else if(e.originalEvent.deltaY > 0 && scroll < maxScroll){
                    scroll += e.originalEvent.deltaY;
                }
                e.preventDefault();
                $container.scrollTop(scroll);
            });
        }
        else
        {
            $parent.off('wheel');
        }
    });