精华内容
下载资源
问答
  • vue设置页面滚动

    千次阅读 2019-03-22 11:31:00
    vue设置页面滚动行为的方法:scrollBehavior (to,from,savePosition){ } savePosition参数,记录浏览器前进或者后退时滚动条的高度。 keep-alive缓存页面的信息,但是不缓存页面高度,只是保留当前页面...

    vue中设置页面的滚动行为的方法:scrollBehavior (to,from,savePosition){        }

    savePosition参数,记录浏览器前进或者后退时滚动条的高度。

    keep-alive缓存页面的信息,但是不缓存页面的高度,只是保留当前页面的数据在缓存中,需要设置name值,否则缓存失效

    在移动端中获取/监听滚动条的高度,document.getElementById(domID).scrollTop

     

    在统一代码风格的基础上,可以使用this.$refs.viewBox.scrollTop 获取当前滚动条的高度

    在获取高度的时候,有一个坑:就是监听事件失效,获取的高度始终为0。

    这个时候,主意检查你的viewBox的元素,是否设置了高度,以及overflow:auto;如果没有设置,请设置,这个坑也就过去了。

    转载于:https://my.oschina.net/1861/blog/3026173

    展开全文
  • 阿里云服务器低至3折 mounted(){ const elOffsetTop = document.getElementById('advantage').offsetTop const...this.isShowCompany){ // do something } }, } 通过监听页面滑动距离顶部的高度来判断,执行对应动作。

    阿里云服务器低至3折 

      mounted(){    
        const elOffsetTop = document.getElementById('advantage').offsetTop
        const docScrollTop = document.documentElement.scrollTop - 230
        if (elOffsetTop >= docScrollTop && elOffsetTop < (docScrollTop + 
          window.innerHeight) && !this.isShow) {
          // 当前元素在屏幕可视范围内
          // do something
        window.addEventListener('scroll',this.handleScroll,true)  
      },
      destroyed () {
        window.removeEventListener('scroll', this.handleScroll, false)
      },
      mthods:{
        handleScroll(e){
          if(e.target.scrollTop >= 500 && !this.isShowService){
            // do something
          }
          if(e.target.scrollTop >= 790 && !this.isShowCompany){
            // do something
          }
        },  
    
      }
    

    通过监听页面滑动距离顶部的高度来判断,执行对应动作。

    展开全文
  • // 获取页面滚动高度 methods:{ scrollHandle(e){ let top = e.srcElement.scrollingElement.scrollTop; // 获取页面滚动高度 console.log(top); } } mounted(){ window.addEventListener('scroll',this....
    // 获取页面滚动高度
    methods:{
          scrollHandle(e){
    	  let top = e.srcElement.scrollingElement.scrollTop;    // 获取页面滚动高度
    	  console.log(top);
            }
    }
    
    mounted(){
    		  window.addEventListener('scroll',this.scrollHandle);//绑定页面滚动事件
    	  },
    
    展开全文
  • 今天小编就为大家分享一篇vue移动端监听滚动高度的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • methods: { showIcon() { if ( !!document.documentElement.scrollTop &amp;&amp; document.documentElement.scrollTop &gt; 200 ) { 页面高度大于200执行操作 ...
    methods: {
       showIcon() {
          if (
            !!document.documentElement.scrollTop &&
            document.documentElement.scrollTop > 200
           ) {            
                页面高度大于200执行操作
            } else {
                 页面高度小于200执行操作
            }
        },
    }
    

    监听事件

    mounted() {
        window.addEventListener("scroll", this.showIcon);
    },
    
    展开全文
  • Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度。 document.body.scrollTop一直是0 原因 因为vue页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。 页面没有DTD,即没指定...
  • vue监听当前页面滚动高度

    千次阅读 2020-02-24 11:58:18
    data(){ return{ scroll:'' } }, mounted:{ window.addEventListener('scroll',this.handleScroll) }, method(){ handleScroll(){ this.scroll = document.documentElement.scr...
  • vue 全屏页面滚动插件 Vue滚动进度栏 (vue-scroll-progress-bar) Vue.js plugin for page scroll progress bar. 页面滚动进度条的Vue.js插件。 View demo 查看演示 View Github 查看Github 入门 (Getting started...
  • vue页面滚动问题元素高度问题

    千次阅读 2019-12-17 18:10:01
    vue页面滚动问题元素高度问题 jQuery获取元素高度 $("#divId").height(); //不包括内边距、边框或外边距 $("#divId").innerHeight();//包括内边距 $("#divId").outerHeight();//包括内边距和边框 二、 1、...
  • vue点击按钮滚动到顶部 Vue-go-top (vue-go-top) ... 滚动页面顶部按钮Vue.js组件。 View demo 查看演示 Download Source 下载源 安装 (Install) 浏览器 (Browser) <script src="vue.js"></...
  • vue移动端监听滚动高度的方法

    万次阅读 2018-03-21 08:30:29
    这两天做移动端项目遇到的问题,就是当滚动条下拉到一定的高度的时候,让某个东西固定定位到顶部首先做的如何监听滚动条的高度,下面是我写的方法var _this =this window.addEventListener('scroll',function(){ ...
  • 先在第一个页面中算出滚动条的位置,会有一个高度,然后把这个页面滚动高度在第二个页面动态给滚动条位置赋值即可。话不多说,上代码。 第一个页面里: this.elTreeMonthScrollTop为要同步位置的滚动条的...
  • Vue开发页面滚动到指定位置

    千次阅读 2019-09-06 17:03:36
    要求页面平滑滚动到指定的位置。用的是H5的scrollIntoView的API。vue中使用方法如下: this.$refs.result.scrollIntoView({ behavior: "smooth" });
  • 1、获取页面滚动高度 document.documentElement.scrollTop 2、什么时候获取页面滚动高度 路由变化,离开当前页面时,可以在以下3个方法内获取页面滚动高度并记下来 beforeDestroy destroyed beforeRouteLeave ...
  • 一、离开当前页面之前保存滚动高度 我的项目页面切换用到了elementUI的tabs组件,所以每次页面切换前都会调用beforeLeaveTab方法,故在该方法中保存离开页面滚动条的高度。 beforeLeaveTab(tab, event) { //...
  • vue 页面监听滚动

    千次阅读 2019-11-07 14:56:07
    样式:(右侧商品基本信息高度超过左侧商品照片时,页面整体滚动到浏览器最顶部时左侧照片固定,右侧继续滚动,滚到左右两侧底部对齐的时候,一起向上滚) 1、app.vue @scroll="showHeader"事件绑到 #app元素上...
  • Vue中获取滚动条的高度的方法

    万次阅读 2019-05-29 22:38:34
    mounted() {//可以在这里面直接进行滚动条的获取 window.addEventListener('scroll', this.handleScroll, true) } methods: { handleScroll() { //方法一 //var top = Math.floor(document.body.scrollTop || ...
  • vue跳转页面滚动到指定位置--瞄点

    千次阅读 2020-06-03 09:34:58
    vue跳转页面滚动到指定位置--瞄点scrollIntoView() scrollIntoView() <!-- moreContent --> <div class="xinya-conten-item"> <router-link tag="div" class="moreContent" :to="{ name: '...
  • vue根据页面滚动距离实现类似吸附效果 <template> <div class="demo"> <div class="son1"></div> <div class="son2"></div> <div id="video" ref="abc">测试用</...
  • vue项目页面监听div滚动 第一步 mounted(){ // 先给页面注册滚动事件 document.addEventListener('scroll',this.Scroll) } 第二步 methods: { // 滚动事件 // 如果不绑定到元素上,则只能监听页面滚动 ...
  • 环境: nuxt.js/vue 实现 mounted() { let that = this; this.$nextTick(() => { // this.initScroll() window.onscroll = function () { //变量scrollTop是滚动滚动时,距离顶部的距离 var scrollTop = ...
  • vue 监听滚轮滚动事件
  • vue监听父组件滚动滚动 实时滚动条 (vue-scrollbar-live) pkg.module supported, which means that you can apply tree-shaking in you project 支持pkg.module,这意味着您可以在项目中应用摇树 A vue ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,060
精华内容 2,824
关键字:

vue设置页面滚动高度

vue 订阅