精华内容
下载资源
问答
  • #移动端弹性滑动以及vue记录滑动位置 ##-webkit-overflow-scrolling介绍 -webkit-overflow-scrolling: auto | touch; auto:普通滚动,当手指从触摸屏上移开,滚动立即停止 touch:滚动回弹效果,当手指从触摸屏上移...

    移动端弹性滑动以及vue记录滑动位置

    -webkit-overflow-scrolling介绍

    -webkit-overflow-scrolling: auto  |  touch;
    

    auto:普通滚动,当手指从触摸屏上移开,滚动立即停止
    touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

    兼容写法

    over-flow: auto;     /* winphone8和android4+ */
    -webkit-overflow-scrolling: touch;    /* ios5+ */
    

    如何使用

    上代码:

    <div class="scrollContainer">
         <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
           <li>6</li>
           <li>7</li>
           <li>8</li>
           <li>9</li>
           <li>10</li>  
         </ul>
    </div>
    
    .scrollContainer{
        width: 100px;
        height: 50px;   
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;       
        overflow-x: hidden;    
    }
    .scrollContainer>ul>li{
        height: 20px;
        width: 100%;
    }
    

    可能会出现的bug

    1.父级元素scrollContainer加上定位position: absolute|relative,滑动几次后可滚动区域会卡主,不能在滑动
    2.快速滑动页面会出现空白,滑动停止后内容才显示

    此时,你应该给父级元素scrollContainer加上如下代码:

    //解决第一个bug
    z-index:1;    
    
    //解决第二个bug
    -webkit-backface-visibility: hidden;    
    -webkit-transform: translate3d(0,0,0);
    

    需求

    在vue项目中,我们可能会遇到这样的需求,例如:

    商品列表页中,点击某一商品,进入到详情页。

    从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。

    也就是说,滚动条的位置应该缓存下来;

    思路

    1. 商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。

    2. 在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。

    3. 在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;

    4. 从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条

    5. Ok,思路就是这样子,大功告成

    vue中具体实现

    我是用的vuex进行管理的滚动条位置,实现代码如下:

    <div class="scrollContainer" ref="scroll">    //加了一个ref,用于获取当前dom 
         <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
           <li>6</li>
           <li>7</li>
           <li>8</li>
           <li>9</li>
           <li>10</li>  
         </ul>
    </div>
    
    computed:{
        ...mapGetters([
              "home_list_top"    //vuex中的存放的滚动条的位置
        ])
    }
    ...
    methods:{
        recordScrollPosition(e) {
          this.$store.dispatch("setHomeListTop",e.target.scrollTop);    //实时存入到vuex中
        }
    }
    ...
    activated(){  //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了
        this.$refs.scroll.scrollTop = this.home_list_top;        //this.$refs.scroll拿到滚动的dom,即scrollContainer,this.home_list_top是存入到vuex里的值
        this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition);    //添加绑定事件
    },
    deactivated(){  //keep-alive 的页面跳转时,移除scroll事件
        this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition);  //清除绑定的scroll事件
    }
    
    展开全文
  • -webkit-overflow-scrolling介绍-webkit-overflow-scrolling: auto | touch;auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续...

    -webkit-overflow-scrolling介绍

    -webkit-overflow-scrolling: auto | touch;

    auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止

    touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

    兼容写法

    over-flow: auto; /* winphone8和android4+ */

    -webkit-overflow-scrolling: touch; /* ios5+ */

    如何使用

    上代码:

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    .scrollContainer{

    width: 100px;

    height: 50px;

    -webkit-overflow-scrolling: touch;

    overflow-y: auto;

    overflow-x: hidden;

    }

    .scrollContainer>ul>li{

    height: 20px;

    width: 100%;

    }

    可能会出现的bug

    父级元素scrollContainer加上定位position: absolute|relative,滑动几次后可滚动区域会卡主,不能在滑动

    快速滑动页面会出现空白,滑动停止后内容才显示

    此时,你应该给父级元素scrollContainer加上如下代码:

    //解决第一个bug

    z-index:1;

    //解决第二个bug

    -webkit-backface-visibility: hidden;

    -webkit-transform: translate3d(0,0,0);

    需求

    在vue项目中,我们可能会遇到这样的需求,例如:

    商品列表页中,点击某一商品,进入到详情页。

    从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。

    也就是说,滚动条的位置应该缓存下来;

    思路

    商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。

    在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。

    在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;

    从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条

    Ok,思路就是这样子,大功告成。

    vue中具体实现

    我是用的vuex进行管理的滚动条位置,实现代码如下:

    //加了一个ref,用于获取当前dom
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    computed:{

    ...mapGetters([

    "home_list_top" //vuex中的存放的滚动条的位置

    ])

    }

    ...

    methods:{

    recordScrollPosition(e) {

    this.$store.dispatch("setHomeListTop",e.target.scrollTop); //实时存入到vuex中

    }

    }

    ...

    activated(){ //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了

    this.$refs.scroll.scrollTop = this.home_list_top; //this.$refs.scroll拿到滚动的dom,即scrollContainer,this.home_list_top是存入到vuex里的值

    this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition); //添加绑定事件

    },

    deactivated(){ //keep-alive 的页面跳转时,移除scroll事件

    this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition); //清除绑定的scroll事件

    }

    后话

    如果有更好的办法,互相交流。

    展开全文
  • 移动端用下拉刷新的方式实现上拉加载 移动端(手机端)页面...一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端) 移动端rem.js使用方法 移动端常见bug -webkit-overflow-scrolling介绍 `...

    -webkit-overflow-scrolling介绍

    ``` -webkit-overflow-scrolling: auto | touch; ``` auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

    兼容写法

    ``` over-flow: auto; /* winphone8和android4+ */ -webkit-overflow-scrolling: touch; /* ios5+ */ ```

    如何使用

    上代码: ```
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    ``` ``` .scrollContainer{ width: 100px; height: 50px; -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .scrollContainer>ul>li{ height: 20px; width: 100%; } ```

    可能会出现的bug

        1.父级元素scrollContainer加上定位position: absolute|relative,滑动几次后可滚动区域会卡主,不能在滑动     2.快速滑动页面会出现空白,滑动停止后内容才显示 此时,你应该给父级元素scrollContainer加上如下代码: ``` //解决第一个bug z-index:1;

    //解决第二个bug
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);

    
    
    <h2>需求</h2>
    在vue项目中,我们可能会遇到这样的需求,例如:
    
    商品列表页中,点击某一商品,进入到详情页。
    
    从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。
    
    也就是说,滚动条的位置应该缓存下来;
    
    <h2>思路</h2>
    &nbsp;&nbsp;&nbsp;&nbsp;1.商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。
    &nbsp;&nbsp;&nbsp;&nbsp;2.在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。
    &nbsp;&nbsp;&nbsp;&nbsp;3.在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;
    &nbsp;&nbsp;&nbsp;&nbsp;4.从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条
    &nbsp;&nbsp;&nbsp;&nbsp;5.Ok,思路就是这样子,大功告成。
    
    
    <h2>vue中具体实现</h2>
    我是用的vuex进行管理的滚动条位置,实现代码如下:
    
    //加了一个ref,用于获取当前dom
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    ``` ``` computed:{ ...mapGetters([ "home_list_top" //vuex中的存放的滚动条的位置 ]) } ... methods:{ recordScrollPosition(e) { this.$store.dispatch("setHomeListTop",e.target.scrollTop); //实时存入到vuex中 } } ... activated(){ //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了 this.$refs.scroll.scrollTop = this.home_list_top; //this.$refs.scroll拿到滚动的dom,即scrollContainer,this.home_list_top是存入到vuex里的值 this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition); //添加绑定事件 }, deactivated(){ //keep-alive 的页面跳转时,移除scroll事件 this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition); //清除绑定的scroll事件 } ```

    后话

    如果有更好的办法,互相交流。

    https://segmentfault.com/a/1190000012857661

    展开全文
  • vue 项目列表滑动卡顿

    千次阅读 2019-09-10 11:21:41
    本人在vue项目中使用美赞的vant组件 列表滑动卡顿 修改添加以下属性就可以来了 .van-pull-refresh { overflow-y: auto; -webkit-overflow-scrolling:touch }
    本人在vue项目中使用美赞的vant组件   列表滑动卡顿  修改添加以下属性就可以来了
    .van-pull-refresh {
        overflow-y: auto;
        -webkit-overflow-scrolling:touch
    }

     

    展开全文
  • VUE移动端使用overflow-auto滚动条坑

    千次阅读 2019-06-04 17:36:06
    解决 滚动条 滑动 一次就一直出现在底部问题 在关闭模态框之前,操作原生dom var box = document.querySelector(‘div’) box .scrollTop=0 设置 滚动条的 位置 为 0, 这样,每次重新打开另一条数据的时候,滚动条...
  • 1.在mian.js中引入prototype.js import Vue from 'vue'; //弹出框禁止滑动 Vue.prototype.noScroll... document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动
  • 下面效果是横向滚动,也可以使用overflow-y: scroll; 修改为垂直滚动。主要代码部分:{{item.sortname}} {{pulldow.sortname}}script部分:export default {name: 'allSort',data () {return {sortMenu: ...
  • Vue 手机页面无法滑动

    2020-12-25 15:47:08
    在页面中加入以下代码: overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  • 原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层。处理:打开弹窗后禁止底层滚动...stop(){document.body.style.overflow=‘hidden‘;document.body.style.positio...
  • 在main.js中设置全局函数://弹出框禁止滑动Vue.prototype.noScroll = function () {var mo = function (e) { e.preventDefault() }document.body.style.overflow = 'hidden'document.addEventListener('touchmove',...
  • 一共有两种方法,但是不论那种方法, ...不然监听不到滑动到屏幕上方的高度! <div class="person" ref="personDom" @scroll="handlerScroll($event)" ></div> 方法一:给指定div这是监听事件 mounted
  • vue最简单左右滑动效果

    千次阅读 2018-05-05 12:00:06
    1.父盒子设置 overflow:hidden; 2.子盒子设置 display:box; overflow-x:scroll; 3.子盒子子元素设置 display:block;height:.34rem;
  • vue页面超出显示滚动条滑动展示 .analysis { width: 100%; height: calc(100%); overflow-y:scroll; overflow-x:hidden; }
  • 改变右侧滑动条样式 .rowUnder { max-height: 246px; overflow-y: auto; } .rowUnder::-webkit-scrollbar { width: 6px; background-color: rgba(25, 132, 165, 0.3); border-radius: 10px; } .rowUnder:...
  • 在main.js中设置全局函数: //弹出框禁止滑动 ... document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动 } //弹出框可以滑动 Vue.prototype.canScroll
  • 要实现卡片左右滑动的功能,类似这样:在实现过程中遇到了如下问题:卡片角标实现边距问题安卓手机适配问题翻页问题角标实现角标及文字可以采用绝对定位和css3的rotate来实现,注意点是在父元素上要overflow:hidden...
  • 方案选择 ...选择另一个方案,将跳转的页面做成组件,这样就不存在需要保存数据等问题,当显示组件时,将组件设为fixed定位,overflow-y:scroll,这么做有2个要注意的地方 1.滑动动组件时,主页面也跟着滚
  • Vue 弹出层时 解决页面滑动问题

    千次阅读 2018-12-29 14:10:41
    使用vue框架构建弹出层时,滑动弹出层,弹出层下面的主页面滑动问题 解决办法在vue created阶段的时候,加上如下代码防止页面滑动 var mo=function(e){e.preventDefault();}; document.body.style.overflow='...
  • import vuescroll from "vuescroll"; import farmers from "@/api/farmers"; import indexApi from "@/api/index"; import Vue from "vue"; import axios from "axios"; export default { name: "myvuescroll...
  • 根据网上的方法 // 关闭弹框 close(){ ... document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false) }, // 弹框弹出 showModel(){ // 弹框出现页面禁止滑动
  • vue 之移动端弹层打开,禁止页面滑动 bodyScroll(event) { event.preventDefault() }, stopScroll () { document.body.style.overflow = 'hidden' document.addEventListener('touchmove', this.bodyScroll, ...
  • 微信开发者工具,andriod,都可以正常使用,老大给了iphone 测试时禁止滑动之后就不能开始滑动了 stopScroll () { let bodyScroll=function(e){e.preventDefault();}; document.body.style.overflow = 'hidden' ...
  • 在标签设置了overflow:scroll属性的标签加上属性 -webkit-overflow-scrolling: touch; 就可以使得滑动十分舒畅
  • vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, (1).滑动页面...

空空如也

空空如也

1 2 3 4 5 6
收藏数 105
精华内容 42
关键字:

vue滑动overflow

vue 订阅