平滑滚动到元素内的某个元素，并设置了溢出来滚动

Question

现在我知道了，是的，关于如何平滑滚动到页面上的元素还有很多问题，是的，我知道我可以像这样使用jquery。

$("#button").click(function() {
$('html, body').animate({
    scrollTop: $("#myDiv").offset().top
}, 2000);
});

是的，我知道我可以使用javascript做到这一点

element.scrollIntoView();

但是这些都没有给我想要的结果。

好吧...有没有一种简单的方法可以滚动到组件内部的元素？

所以我有一个侧边栏，并且侧边栏在主体外部具有自己的滚动条，因为其组件的溢出设置为可滚动..因此，我想做的就是滚动到该组件中的某个元素

我试着做..

scrollIntoView就是这样。

upNext.scrollIntoView({behavior: 'smooth', block: 'start'});

但是我发现我无法让它滚动到元素上的正确位置，它的错误和behavior: 'smooth'等额外功能behavior: 'smooth'没有强大的浏览支持

所以我的问题是如何滚动到某个元素中的某个元素？

Answer 1

您必须在侧边栏而不是文档或html中触发滚动

 $('#scroll-sidebar').click(function(){ $('sidebar').animate({ scrollTop: $("#scroll-here").offset().top }, 2000); }); 

 .container{ position: relative; display: flex; background: white; } sidebar, main{ padding: 15px; } sidebar{ width: 200px; background: red; height: 400px; overflow-x: auto; } ul > li{ display: inline-block; margin: 5px 0; } main{ flex: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <sidebar> <h1>Sidebar</h1> <ul> <li>Iste, doloribus!</li> <li>Labore, animi.</li> <li>Adipisci, dolores?</li> <li>Odio, excepturi.</li> <li>Odio, aliquid!</li> <li>Numquam, officia.</li> <li>Alias, officiis!</li> <li>Tenetur, quas!</li> <li>Totam, vitae.</li> <li>Dignissimos, at?</li> </ul> <hr> <ul id="scroll-here"> <li>Iste, doloribus!</li> <li>Labore, animi.</li> <li>Adipisci, dolores?</li> <li>Odio, excepturi.</li> <li>Odio, aliquid!</li> <li>Numquam, officia.</li> <li>Alias, officiis!</li> <li>Tenetur, quas!</li> <li>Totam, vitae.</li> <li>Dignissimos, at?</li> </ul> </sidebar> <main> <h1>Main Container</h1> <button id="scroll-sidebar">Scroll Sidebar</button> </main> </div>