Question

我有一个父容器，设置为overflow: auto:，其中包含overflow: auto的容器。当我在子滚动容器上盘旋时，我只想滚动该容器，而不是父容器，反之亦然。

目前，当我向下滚动页面时，父级滚动直到子容器，然后开始滚动子容器，然后在子项完成滚动时延迟回父容器。有办法防止这种情况吗？

以下是我的例子：

<div class="parent">
    <div>Outter text</div>
    <div>Outter text</div>
    <div>Outter text</div>
    <div>Outter text</div>
    <div>Outter text</div>
    <div>Outter text</div>
    <div class="scroll-container">
        <ul>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
        </ul>
    </div>
    <div>Outter text</div>
    <div>Outter text</div>
    <div>Outter text</div>
</div>

和我的CSS：

.parent {
    height: 100px;
    overflow-y: auto;
    border: 1px solid black;
}

.scroll-container {
    height: 35px;
    overflow-y: auto;
    color: red;
}

您将在此jsFiddle中注意到，当您向下滚动到scroll-container时，滚动将首先从parent开始（这是预期的，因为鼠标悬停在scroll-container上1}}），但是当它到达底部时我会回到parent（这是我想要阻止的）。

我并不反对使用jQuery / javascript，但我想尽可能避免使用。

Answer 1

看起来很hacky但似乎解决了这个问题：

DEMO jsFiddle

(function () {
    var scrollTop;
    $('.scroll-container').attr('tabindex', -1).css('outline', 'none');
    $('.parent').on('scroll', function () {
        var $scrollContainer = $(this).find('.scroll-container');
        if ($scrollContainer.is(':focus, :hover')) {
            this.scrollTop = scrollTop;
        }
    });
    $('.scroll-container').on('focus mouseenter', function () {
        scrollTop = $(this).closest('.parent').scrollTop();
    });
}());

如何停止滚动延迟到父滚动条

1 个答案: