vue监听页面滚动到某个高度触发事件流程

目录
  • 监听页面滚动到某个高度触发事件
  • 动态监听页面滚动高度

监听页面滚动到某个高度触发事件

methods: {
   showIcon() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 200
       ) {            
            页面高度大于200执行操作
        } else {
             页面高度小于200执行操作
        }
    },
}

监听事件

mounted() {
    window.addEventListener("scroll", this.showIcon);
},

动态监听页面滚动高度

//获取页面滚动高度
methods:{
      scrollHandle(e){
      let top = e.srcElement.scrollingElement.scrollTop;    // 获取页面滚动高度
      console.log(top);
        }
}
mounted(){
          window.addEventListener('scroll',this.scrollHandle);//绑定页面滚动事件
      },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE实时监听元素距离顶部高度的操作

    效果图如下所示 .html <!-- 监听ref距离顶部高度 --> <div ref="pronbit"> <div>今日热门</div> <div>今日热销</div> </div> .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, methods: { handleScrollx() { cons

  • vue实现滑动和滚动效果

    本文实例为大家分享了vue实现滑动和滚动效果的具体代码,供大家参考,具体内容如下 面板滑动效果,父组件是resultPanel,子组件是resultOption,仿照了iview中,Select组件的写法. <template>   <div v-if="visiable">     <div class="transparent" :class="{active:resultPanelStatus==='top'}"

  • vue 监听屏幕高度的实例

    项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把window.onresize事件挂在到mounted mounted() { const that = this window.onresize = () => { return (() => { window.fullHeight = document.docum

  • vue移动端监听滚动条高度的实现方法

    这两天做移动端项目遇到的问题,就是当滚动条下拉到一定的高度的时候,让某个东西固定定位到顶部 首先做的如何监听滚动条的高度,下面是我写的方法 var _this =this window.addEventListener('scroll',function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop>100{//滚动条的高度,可以动态获取也可以写死 //

  • vue监听页面滚动到某个高度触发事件流程

    目录 监听页面滚动到某个高度触发事件 动态监听页面滚动高度 监听页面滚动到某个高度触发事件 methods: {    showIcon() {       if (         !!document.documentElement.scrollTop &&         document.documentElement.scrollTop > 200        ) {                         页面高度大于200执行操作         } else

  • vue监听页面中的某个div的滚动事件并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点,现在的目标是,要监听这个xq-box滚动事件,右边一旦开始滚动,就要知道滚动到哪个子div,并让左边的目录树中对应的节点高亮显示.要怎么做呢? 1.首先,先写好大概的页面布局,这里要注意,右边xq-box的子div要绑定"'xqItem'+序号"的id,为了下面用js能获取到匹配的dom元

  • 小程序中监听页面滚动的几种方法实例

    小程序中监听页面滚动的几种方法实例

    目录 目录 实现效果 下面是Intersection Observer在MDN上的介绍 IntersectionObserver relativeToViewport 接受参数 Object margins observe(string targetSelector, function callback) 参数 Object res 小程序中监听页面的其他方法 page-meta scroll-view 总结 在工作中我们经常遇到需要监听页面中元素位置,当元素超出显示区域或即将显示到页面上,我们

  • Vue监听页面刷新和关闭功能

    我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化. 将提交的一步操作放到 beforeDestroy 钩子函数中. beforeDestroy() { console.log('销毁组件') this.finalCart()}, 但是发现  beforeDestroy 只能监听到页面间的跳转,无法监听到页面刷新和关闭标签页. 所以还是要借助 onbeforeunload 事件. 顺便复习了一下 JavaScript 中的一

  • vue监听页面中的某个div的滚动事件，并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点,现在的目标是,要监听这个xq-box滚动事件,右边一旦开始滚动,就要知道滚动到哪个子div,并让左边的目录树中对应的节点高亮显示.要怎么做呢? 1.首先,先写好大概的页面布局,这里要注意,右边xq-box的子div要绑定"'xqItem'+序号"的id,为了下面用js能获取到匹配的dom元

  • vue如何监听页面的滚动的开始和结束

    目录 监听页面的滚动的开始和结束 vue监听页面滚动事件 方法:监听滚动实现 问题:监听不到页面的滚动 监听页面的滚动的开始和结束 export default { data() { return { oldScrollTop: 0, //记录上一次滚动结束后的滚动距离 scrollTop: 0 // 记录当前的滚动距离 } }, watch: { scrollTop(newValue, oldValue) { setTimeout(() => { if(newValue == window.s

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

  • vue监听滚动事件实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

  • Vue监听滚动实现锚点定位(双向)示例

    在项目需求中需要实现一个滚轴联动锚点的功能 效果图如下: 功能代码demo如下: <template> <div class="container"> <div class="wrapper"> <div class="section" style="height:500px;width:100%" v-for="(item, index) in list" :ke

随机推荐