Jquery 平滑滚动文档的子元素而不滚动文档

典型的平滑卷轴有一百万个答案。不同的是，我试图让element2（带滚动条）在单击element1中的链接时平滑滚动。也许这是不可能的。元素滚动（不慢），不幸的是父窗口也滚动。我将进入HTML、jQuery和CSS

HTML:

你可以用

$('.listings').animate({
      scrollTop: ($(hash).offset().top + $('.listings').scrollTop())- 20
 }, 800);

问题是，在包含offset（）时，还需要包含scrollContainer的当前scrollvalue

附上一把小提琴供参考

---

你的答案似乎很准确。我有一个自定义的谷歌地图使用地图API。以及地图右侧带有滚动条的固定高度容器中的列表。这确实解决了整个页面滚动的问题，但平滑滚动不起作用。从控制台：[违规]将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。将事件处理程序标记为“被动”以使页面更加响应。阅读文档并尝试实现，但仍然没有平滑滚动。不过，我对你的付出很满意，因为它解决了我一半的问题。

<script>
    jQ=jQuery.noConflict();
    jQ(document).ready(function(){
        jQ("a").on('click', function(event) {
            if (this.hash !== "") {
                event.preventDefault();
                var hash = this.hash;
                jQ('html, body').animate({
                    scrollTop: jQ(hash).offset().top-100
                }, 800);
            }
        });
    });
</script>

.listings {
width:300px;
height:500px;
overflow-y:scroll;
}

$('.listings').animate({
      scrollTop: ($(hash).offset().top + $('.listings').scrollTop())- 20
 }, 800);