vue 监听滚轮滚动事件

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

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

相关阅读

相关 JS 监听滚动条事件

JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果 > 获取滚动条位置代码 / 获取滚动条位置 /

朱雀/ 2023年10月04日 18:37/ 0 赞/ 96 阅读

相关 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 赞/ 147 阅读

相关 vue的滚动监听事件

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

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

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

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

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

相关监听滚动条事件

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

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

相关鼠标滚轮事件以及满屏滚动实现

MDN对鼠标的滚轮事件的介绍： ![<code>这里写图片描述</code>][code_code] ![这里写图片描述][70] MDN对鼠标滚轮事件的实现：

素颜马尾好姑娘i/ 2022年05月17日 22:22/ 0 赞/ 268 阅读

相关页面滚动监听事件

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

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

相关 vue 监听滚轮滚动事件

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

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

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

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

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

相关 vue滚动事件监听

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

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