Welcome To Ask or Share your Answers For Others

怎么通过js控制滚动条？

asked Feb 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

怎么通过js控制滚动条？

我在

<script>
  document.body.scrollTop = 100;
  //.滚动条位置不变；
</script>


但是我在控制台输入这句话 document.body.scrollTop = 100;滚动条位置会变到100的位置，百思不得其解，为什么？在代码里面怎么控制？

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

Welcome To Ask or Share your Answers For Others

1 Answer

answered Feb 6, 2021 by 深蓝 (71.8m points)

你的 <script> 标签是不是写在 <head> 里了？
先将 <script> 移动到 </body> 前，或注册 onload 事件
必须确保在内容渲染后（数据超过浏览器高度，产生滚动条了）执行

window.addEventListener('load', evt => {
  debugger // 断点中断，此时看页面是否有内容且有滚动条
  window.scrollTo(0, 100) // 并且最好使用 window.scrollTo 方法
  setTimeout(() => window.scrollTo(0, 100), 0) // 还可以延迟一会执行
})

简单点，你在按钮上注册单击事件，在事件中设置滚动条位置肯定没有问题

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

...