Light

smackgg / vue-scroll-lock Goto Github PK

View Code? Open in Web Editor NEW

31.0 3.0 7.0 1.3 MB

一个 VUE 组件：子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

Home Page: https://smackgg.github.io/vue-scroll-lock

JavaScript 25.71% Vue 72.17% HTML 2.13%

vue component scrolllock scroll

vue-scroll-lock's Introduction

此方案已不是最优方案，不在维护！！！

vue 请移步 v-scroll-lock

react 请移步 react-scrolllock

vue-scroll-lock

一个 VUE 组件：子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

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

文档 & 例子

Document & Demo

使用

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

vue-scroll-lock's People

Contributors

Stargazers

Watchers

Forkers

libin1991 shooke chenyuan8059 musnick donsalvador newyoung21 cheetooo

vue-scroll-lock's Issues

大佬推荐的库都没有只lock父亲的功能呀

看了下，全都是锁body的，就想找个像大佬实现的这个，支持只锁父亲，body还能继续滚动的，愣是没找着...
为什么不维护了呢？有什么支持锁父亲的库推荐吗？

Text area scroll not working

The text-area tag inside vue-scroll-lock component can't be scrollable

Unable to preventDefault inside passive event listener

滚动区域滑动时，发生Unable to preventDefault inside passive event listener，解决方案：
将this.$el.addEventListener('touchstart', this.onTouchStartHandler, false )
this.$el.addEventListener('touchmove', this.onTouchMoveHandler, false)
变为
this.$el.addEventListener('touchstart', this.onTouchStartHandler, { passive: false })
this.$el.addEventListener('touchmove', this.onTouchMoveHandler, { passive: false })，
就不会报这个错了

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.