介绍

我们经常遇到一种情况。当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至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">
// ...something
</div>
</scroll-lock>
参数 描述 类型 可选值 默认值
lock 是否阻止父级滚动 Boolean true/false true
bodyLock 是否阻止body容器滚动 Boolean true/false false

贡献

欢迎 Star、PR

// install
npm install | yarn // dev
npm run dev

THANKS

移动端的实现参考张鑫旭的web移动端浮层滚动阻止window窗体滚动JS/CSS处理

LICENSE

MIT

原文地址:https://segmentfault.com/a/1190000012930548

一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)的更多相关文章

  1. 子元素scroll父元素容器不跟随滚动JS实现

    仅供参考: function parentNotRoll($id){ var flg;//标记滚动方向,true-向下,false-向上 var $test = document.getElement ...

  2. 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"

    如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...

  3. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  4. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  5. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  6. 自己编写并发布一个Vue组件

    自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...

  7. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  8. WPF XMAL获取元素的父元素,子元素

    /// 获得指定元素的父元素 /// </summary> /// <typeparam name="T">指定页面元素</typeparam> ...

  9. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

随机推荐

  1. ReactiveCocoa信号使用方法

    最近研究RAC时都是基于UI控件来使用,对单独的signal没有使用过,最近在网上看到一篇文章是关于RAC单独signal的使用.在学习整理后将个人觉得能帮助用于UI控件的一些signal使用方法记录 ...

  2. 使用aespython进行ECB加解密示例

    CBC示例: from aespython import cbc_mode, key_expander, aes_cipher key = 'MluJMEZegVmrnWDaBiG1j7lqpkxNH ...

  3. 职场选择之大公司 VS 小公司

    其实这是个非常难回答的问题,很多职场新人都会有类似的顾虑和疑问. 这个问题就好比业界比较容易引起争议的编程语言哪个是最好的一样.大公司还是小公司里面发展,只有身处其中才能体会,如人饮水,冷暖自知. 笔 ...

  4. Java进阶篇(二)——抽象类、内部类

    之前在类和对象中我们说到了类的普通特性,本篇将介绍类的一些高级特性. 一.抽象类 抽象类:抽象类是只声明方法的存在而不去具体实现它的类.抽象类不能被实例化,也就是不能创建其对象.使用abstract关 ...

  5. 从开发者角度解析 Android N 新特性!

    大清早看到 Google 官方博客发布 Android N 的开发者预览版,立马从床上跳起来开始仔仔细细的读起来. 从开发者角度来看,Android N 的更新并不算大.网上之前流传的一些 Andro ...

  6. [Swift]LeetCode201. 数字范围按位与 | Bitwise AND of Numbers Range

    Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all numbers ...

  7. 20155326 2017-2018-1 《信息安全系统设计基础》课下加分项mypwd实现

    20155326 2017-2018-1 <信息安全系统设计基础>课下加分项mypwd实现 pwd命令能做什么 在虚拟机中输入pwd查看其返回的是什么 通过上图得知pwd命令用来显示目录. ...

  8. JavaScript快速入门-ECMAScript对象介绍

    一.概念介绍 在 ECMAScript 中,所有对象并非同等创建的.一般来说,可以创建并使用的对象有三种:本地对象.内置对象和宿主对象. 要理解这三种对象,先要理解宿主环境. 1.宿主环境 一般宿主环 ...

  9. 【转】如何使用MAT分析内存泄漏

    原文链接:http://www.lightskystreet.com/2015/09/01/mat_usage/ MAT - Memory Analyzer Tool 使用进阶 Sep 1, 2015 ...

  10. storm并发度理解

    1. 核心原理 一个运行中的拓扑是由什么组成的:worker进程,executors和tasks.Storm是按照下面3种主要的部分来区分Storm集群中一个实际运行的拓扑的:Worker进程.Exe ...