onscroll事件与onscrollTop

onscroll事件以及onscrollTop的使用

因为很久没有用原生js了所以导致很多东西都生疏了，今天一个案例用到了onscroll感觉很实用但是好像之前没怎么了解过(也可能是我忘干净了-.-)所以在这里记录一下

onscroll事件

onscroll 事件在元素滚动条在滚动时触发。

以上是菜鸟教程的定义，刚开始我以为这个事件其实和onmousewheel事件是一会事，后来我发现它们两个其实是不同的。onmousewheel监听的是鼠标事件而onscroll事件监听的是元素滚动的事件，元素的滚动不仅仅靠鼠标的滚轮来触发还可以通过键盘上的方向键以及点击右边的滚动条等方式来触发。另外还有一点需要注意：

上面是我在菜鸟上截的图，其实不难看出onscroll是所有浏览器都支持的而且使用与其他普通事件没什么区别，但是我遇到了下面这个问题：

<div class="page">
    <div class="nav"></div>
 </div>
 <script>
  var nav = document.querySelector(".nav");
  let page = document.querySelector(".page");
  page.addEventListener("scroll",function(){
    console.log(111);
  })
</script>

上面的写法根本不能触发onscroll事件，然后我换成下面的方式就能正常触发：

  window.addEventListener("scroll",function(){
    console.log(111);
  })

我也不知道为什么使用其他元素就不能触发onscroll但是使用window就能正常触发，总不能是因为onscroll是window的专属事件吧，那也太扯了…

scrollTop

这个值是一个值，它表示元素距离顶部的距离，一般用它来做返回顶部这个功能

这里的图参考的是: https://www.cnblogs.com/wenruo/p/9754576.html.

element.scrollHeight - element.scrollTop === element.clientHeight

上面的代码是我引用上面博主的，用来判定元素是否滚动到底。其实这个倒不是难理解，主要是容易和什么offsetTop、scrollHeight、offsetHeight等乱七八糟的值弄混，不过我个人建议最好是归纳一下，毕竟这些值在平时项目里面还是很常用的。

总结

虽然问题解决的差不多了但是还是有个小问题如鲠在咽，希望过几天能把这个小问题解决。

标签：触发,onscrollTop,元素,onscroll,window,事件,page
来源： https://blog.csdn.net/qq_45279180/article/details/110557575