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

我将把页面分成两列，有时候左列会有溢出，而右列不会。右列为父列，左列为溢出子列

.parentDiv { 背景色：红色； } childDiv先生 { 背景颜色：绿色； 高度：100px； 宽度：300px； 溢出y：滚动； 溢出-x：滚动； } 在此区域中滚动应滚动内部溢出div 在此区域中滚动应滚动内部溢出div 在此区域中滚动应滚动内部溢出div 在此区域中滚动应滚动内部溢出div 在此区域中滚动应滚动内部溢出div 在此区域中滚动应滚动内部溢出div 这应该只在表单外部和内部滚动 这应该只在表单外部和内部滚动 这应该只在表单外部和内部滚动 这应该只在表单外部和内部滚动 这应该只在表单外部和内部滚动 这应该只在表单外部和内部滚动 这应该只在表单外部和内部滚动 这应该只在表单外部和内部滚动 这应该只在表单外部和内部滚动 v 这应该只在表单外部和内部滚动

---

我想我已经弄明白了。这是你的电话号码

检测何时在父div上滚动

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

新的滚动值应用于子div并滚动

.childDiv{
    overflow-y: hidden;
}

应用溢出：隐藏；因为这是禁用childDiv滚动的最简单方法

就这些！下面是使用的完整代码，请记住这是使用jQuery，因此需要启用才能使用脚本

html

jQuery

---

根据RMo的回答，我做了一个小小的更改，使其能够正常运行，平滑滚动，例如在Mac电脑上

//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');
        }
    });

---

那太聪明了！我试图找到一种在溢出中传播事件并在父中取消该事件的方法，甚至没有考虑简单地在父对象中捕获它，并使用JS来滚动该子。非常感谢。

.childDiv{
    overflow-y: hidden;
}

<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>

.parentDiv
{
  background-color: red;
}

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

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);
});

//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');
        }
    });