平滑滚动到元素内的某个元素,溢出设置为滚动

时间:2018-03-29 03:57:12

标签: javascript angular typescript

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

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

是的我知道我可以用javascript

来做到这一点
element.scrollIntoView();

但这些都没有给我预期的结果..

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

所以我有一个侧边栏,侧边栏在身体外面有自己的滚动,因为它的组件溢出设置为滚动..所以我想要做的是滚动到该组件中的某个元素

我试过......

scrollIntoView喜欢这样..

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

但我发现我无法让它滚动到元素上的正确位置,它的马车及其behavior: 'smooth'等额外功能没有很好的支持

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

1 个答案:

答案 0 :(得分:0)

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

os.chdir("cd Documents/archive")

os.system("cd Documents/archive")
$('#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;
}