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