ios滚动条影响父页面 vue_一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)...

介绍

我们经常遇到一种情况。当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器。这是浏览器默认的滚动行为。

但是很多情况,我们想要子元素滚动完成后,不触发父元素的滚动,比如 modal、侧边栏 等等。

深入研究-webkit-overflow-scrolling:touch及ios滚动

详细文档 & 例子

Document & Demo

vue-scroll-lock

一个 VUE 组件:子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

【 React 请移步 react-scroll-lock-component

使用

``` npm install vue-scroll-lock --save // or yarn add vue-scroll-lock ```

// main.js

import VueScrollLock from 'vue-scroll-lock'

Vue.use(VueScrollLock)

// ***.vue

<scroll-lock>

<div class="content">

/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值