A VUE component: implement child scroll parent element container does not follow scroll (compatible with PC, mobile terminal)

introduce

We often have a situation. When the scrollbar area is slid, the parent scrollbar is triggered when the bottom or top of the child scrollbar, and the parent scrollbar continues to fire up until the body container. This is the browser’s default scrolling behavior.

But in many cases, we want to scroll through the child element without triggering the scrolling of the parent element, such as Modal, sidebar, and so on.

example

1. Most common examples

2. Modal (Click on the blue font to see examples)

vue-scroll-lock

A VUE component: child scroll parent element container does not follow scroll (PC, mobile compatible)

React React scroll lock-component

Documents & Examples

Document & Demo

use

npm install vue-scroll-lock --save
// or
yarn add vue-scroll-lock
Copy the code

// main.js import VueScrollLock from 'vue-scroll-lock' Vue.use(VueScrollLock) // ***.vue <scroll-lock> <div class="content"> // ... something </div> </scroll-lock>Copy the code

parameter	describe	type	An optional value	The default value
lock	Whether to prevent parent scrolling	Boolean	true/false	true
bodyLock	Whether to prevent the body container from rolling	Boolean	true/false	false

contribution

Welcome Start and PR

// install
npm install | yarn

// dev
npm run dev
Copy the code

THANKS

Mobile terminal implementation reference Zhang Xinxu’s Web mobile terminal floating layer scrolling to prevent window form scrolling JS/CSS processing

LICENSE

MIT