Question

我要将页面拆分为2列，有时左列会有溢出，而右列则不会。右列是Parent，左列是溢出子。

＆＃13;

{"_id":  "2", "jobUploadDate":  "2017-02-02T14:31:26.497Z"}

＆＃13;

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

＆＃13;

我在这里设置了一个类似的场景： http://jsfiddle.net/y1byh25d/1/

基本上，我想捕获红色区域中的滚动事件，并导致绿色溢出容器滚动。这有点奇怪。

Answer 1

我想我已经想通了:)。这是JSFiddle

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

检测父div上滚动的时间

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

一些条件逻辑，用于检测用户是向上还是向下滚动。它还检查子div是否可以进一步向上/向下滚动。然后，如果满足这些条件，它将修改将分配给scrollTop（）的值。

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

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

.childDiv{
    overflow-y: hidden;
}

申请溢出：隐藏;因为这是禁止滚动childDiv的最简单方法。

这就是全部！这是使用的完整代码，请记住这是使用jQuery，因此需要启用才能使用该脚本。

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

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

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

2 个答案: