vue 监听滚轮滚动事件

亦凉 2021-12-10 06:39 784阅读 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 条评论，784人围观）

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

相关阅读

相关 vue 项目添加滚动监听事件

代码如下 <template> <div> <p v-for="index in 100" :key="index">滚动监听

ゝ一世哀愁。/ 2023年06月25日 04:58/ 0 赞/ 62 阅读

相关 vue监听滚动事件实现元素吸顶

添加滚动监听事件： mounted () \{ window.addEventListener('scroll', this.handleScroll) \},

偏执的太偏执、/ 2023年06月14日 04:27/ 0 赞/ 120 阅读

相关 Qt5.13监听鼠标滚轮的上下滚动事件QWheelEvent的angleDelta().y()

There are two ways to read the wheel event delta: angleDelta() returns the delta in whee

╰半橙微兮°/ 2022年12月23日 11:07/ 0 赞/ 295 阅读

相关 vue的滚动监听事件

scrollGet(e) { // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop

ゝ一纸荒年。/ 2022年12月18日 10:51/ 0 赞/ 347 阅读

相关 Vue添加销毁监听滚动事件

`添加 window.addEventListener("scroll",this.adsorb) ` `销毁 window.removeEventListen

妖狐艹你老母/ 2022年11月29日 12:53/ 0 赞/ 430 阅读

相关监听滚动条事件

滚动条事件可以监听整个页面也可以监听某一div或者iframe，举例： //监听整个窗口的滚动条 window.onscroll = function()

迈不过友情╰/ 2022年06月07日 23:18/ 0 赞/ 760 阅读

相关页面滚动监听事件

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

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

相关 vue 监听滚轮滚动事件

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

亦凉/ 2021年12月10日 06:39/ 0 赞/ 785 阅读

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

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

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

相关 vue滚动事件监听

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

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