vue 监听滚轮滚动事件

2021-12-10 14:39 62阅读 0赞

<script>
        export default {
          name:"vue-scroll",
          data () {
            return {
              ……
            }
          }，
          mounted: function () {
            window.addEventListener('scroll', this.handleScroll, true);  // 监听（绑定）滚轮滚动事件
          },
          methods: {
            handleScroll: function () {
                let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;  
                // 设备/屏幕高度
                let scrollObj = document.getElementById(div); // 滚动区域
                let scrollTop = scrollObj.scrollTop; // div 到头部的距离
                let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
                //滚动条到底部的条件
                if(scrollTop+clientHeight == scrollHeight){
                    // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
                }  
            }
          },
          destroyed: function () {
            window.removeEventListener('scroll', this.handleScroll);   //  离开页面清除（移除）滚轮滚动事件
          }
        }
    </script>

文章版权声明：注明蒲公英云原创文章，转载或复制请以超链接形式并注明出处。

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 08:32/ 0 赞/ 126 阅读

相关 JavaScript中监听鼠标滚轮事件

使用jQuery监听鼠标滚轮事件： <!DOCTYPE html> <html> <head> <meta charse

谁借莪１个温暖的怀抱￠/ 2021年10月18日 19:48/ 0 赞/ 105 阅读

相关鼠标滚轮事件

做一个用鼠标滚轮控制图片放大缩小的简单功能。 1.滚动时页面也会跟随滚动e.preventDefault()去掉默认事件。 2.Chrome、IE等浏览器，用mousewh

迷南。/ 2021年11月02日 10:14/ 0 赞/ 84 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 14:39/ 0 赞/ 62 阅读

相关 vue(7)监听事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

爱被打了一巴掌/ 2022年01月11日 11:05/ 0 赞/ 34 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 10:51/ 0 赞/ 52 阅读

相关 Firefox上实现鼠标滚轮事件时隐藏滚动条

在Chrome上实现了页面的鼠标滚轮事件，但是在Firefox上会出先横向和纵向滚动条，如果设置存放内容的容器overflow:hidden;会导致滚轮事件失效，因此不能通过这

喜欢ヅ旅行/ 2022年03月31日 12:37/ 0 赞/ 14 阅读

相关 vue监听滚动事件实现元素吸顶-getBoundingClientRect()

需求顶部有banner，当屏幕向上滑动超出banner高度时出现导航思路监听scroll，通过判断当前元素与顶部的距离，来控制导航的显隐实现

亦凉/ 2022年05月15日 09:29/ 0 赞/ 1 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 14:39/ 0 赞/ 62 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 08:32/ 0 赞/ 126 阅读

相关 JavaScript中监听鼠标滚轮事件

使用jQuery监听鼠标滚轮事件： <!DOCTYPE html> <html> <head> <meta charse

谁借莪１个温暖的怀抱￠/ 2021年10月18日 19:48/ 0 赞/ 105 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 10:51/ 0 赞/ 52 阅读

相关鼠标滚轮事件

做一个用鼠标滚轮控制图片放大缩小的简单功能。 1.滚动时页面也会跟随滚动e.preventDefault()去掉默认事件。 2.Chrome、IE等浏览器，用mousewh

迷南。/ 2021年11月02日 10:14/ 0 赞/ 84 阅读

相关 vue监听滚动事件实现元素吸顶-getBoundingClientRect()

需求顶部有banner，当屏幕向上滑动超出banner高度时出现导航思路监听scroll，通过判断当前元素与顶部的距离，来控制导航的显隐实现

亦凉/ 2022年05月15日 09:29/ 0 赞/ 1 阅读

相关 vue(7)监听事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

爱被打了一巴掌/ 2022年01月11日 11:05/ 0 赞/ 34 阅读

相关 Firefox上实现鼠标滚轮事件时隐藏滚动条

在Chrome上实现了页面的鼠标滚轮事件，但是在Firefox上会出先横向和纵向滚动条，如果设置存放内容的容器overflow:hidden;会导致滚轮事件失效，因此不能通过这

喜欢ヅ旅行/ 2022年03月31日 12:37/ 0 赞/ 14 阅读