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

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)，但是当它到达底部时会延迟返回到 parent(这是我想要防止的)。

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

Answer 1

看起来很乱，但似乎可以解决:

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