tua-body-scroll-lock
inspired by body-scroll-lock
English | 简体中文
Introduction
tua-body-scroll-lock enables body scroll locking for everything.
Why not body-scroll-lock(BSL)?
- Doesn't work on Android webview
- Doesn't work on PC with mouse wheel
- Doesn't work on iOS, if you touch somewhere instead of
targetElement - Must pass
targetElement, even if it's not necessary
Install
Node Package Manager(recommended)
$ npm i -S tua-body-scroll-lock
# OR
$ yarn add tua-body-scroll-lock
CDN
- UMD(
tua-bsl.umd.js)
example code
<!-- unpkg -->
<script src="https://unpkg.com/tua-body-scroll-lock"></script>
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/tua-body-scroll-lock"></script>
- Minified UMD(
tua-bsl.umd.min.js)
example code
<!-- unpkg -->
<script src="https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.umd.min.js"></script>
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.umd.min.js"></script>
- ESM in browser(
tua-bsl.esm.browser.js)
example code
<!-- unpkg -->
<script type="module">
import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js'
lock()
unlock()
</script>
<!-- jsdelivr -->
<script type="module">
import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js'
lock()
unlock()
</script>
- Minified ESM in browser(
tua-bsl.esm.browser.min.js)
example code
<!-- unpkg -->
<script type="module">
import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js'
lock()
unlock()
</script>
<!-- jsdelivr -->
<script type="module">
import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js'
lock()
unlock()
</script>
Usage
Normal
import { lock, unlock } from 'tua-body-scroll-lock'
lock()
unlock()
TargetElement needs scrolling（iOS only）
In some scenarios, when scrolling is prohibited, some elements still need to scroll, at this point, pass the targetElement.
import { lock, unlock } from 'tua-body-scroll-lock'
const elementOne = document.querySelector('#elementOne')
const elementTwo = document.querySelector('#elementTwo')
// one targetElement
const targetElement = elementOne
// multiple targetElements
const targetElements = [elementOne, elementTwo]
lock(targetElement)
lock(targetElements)
unlock(targetElement)
unlock(targetElements)
The
targetElementis not required on the PC and Android.
clearBodyLocks
In the SPA, if you called lock, but forgot to call unlock before jumping to other pages, that is too bad. Because the operation of the page is not restored, such as forbid touchmove, clearBodyLocks is used to clear all side effects. Sure, you can also call unlock, but if you have called lock multiple times, you must call unlock multiple times, which is very unfriendly.
demo.vue
<template>
// some element
</template>
<script>
import { lock, unlock, clearBodyLocks } from 'tua-body-scroll-lock';
export default {
name: 'demo',
data () {
return {}
},
methods: {
showDialog () {
// Disable body scroll
lock()
},
hideDialog () {
// Enable body scroll
unlock()
}
},
beforeDestroy () {
// If forgot to call unlock before jumping to other pages, `clearBodyLocks` can clean all side effect.
clearBodyLocks()
}
}
</script>
Demo
| platform | link |
|---|---|
| gh-pages | https://tuateam.github.io/tua-body-scroll-lock |
| jsbin | https://jsbin.com/cafiful/edit?output |
| codepen | https://codepen.io/buptsteve/pen/PvNQjP |
| jsfiddle | https://jsfiddle.net/buptsteve/6u8g3Lf5/ |
| codesandbox | https://codesandbox.io/s/o73z4jy5q9 |
Contributors
Thanks goes to these wonderful people (emoji key):
 evinma |
 StEve Young |
 li2go |
 songyan,Wang |
 Даниил Пронин |
 阿卡琳 |
 falstack |
This project follows the all-contributors specification. Contributions of any kind welcome!
-
中文名称：滚动锁定键 按下此键后在Excel等按上、下键滚动时，会锁定光标而滚动页面；如果放开此键，则按上、下键时会滚动光标而不滚动页面。 键盘上三个灯分别是什么？？ 第一个灯的意思一般是代表数字键盘键的"NumLock"键。一般电脑开启的时候就会自动点亮的。这个灯亮的时候如果需要输入数字的时候就直接从数字键盘上输入即可。如果这个灯未亮的话，那按数字键盘的数字键是没反应的，该键一般
-
这句话用来去除滚动条，解决了右边无论width无论怎么设置都有空列的问题 或是在iframe标签中增加scrolling="no"属性
-
用电脑10年，今天第一次看到Scroll Lock键的用途了， 当然，FPE（整人专家）自定义键之类的不算。 在Excel中， 如果Scroll Lock灯是亮的， 左右上下的方向键，控制Sheet页面的滚动，而不是单元格。
-
$('body').scrollTop()无效。 $(’html').scrollTop()是有效的 为了防止其它浏览器这样，我们就可以写成： $('html,body').scrollTop()
-
现在我们能够用到Scroll Lock键的地方，估计也就有Excel中了。在EXCEL中，在Scroll Lock关闭的状态下，使用翻页键(如Page Up和Page Down)时，单元格选定区域会随之发生移动。但是当我们按下了Scroll Lock键后，就不会移动个选定的单元格了。
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <ME
-
body元素的scrollTop body元素的scrollTop是超出“浏览器窗口上边界”的内容的高度 当html文档头部包含有“文档类型声明”时，需要用document.documentElement.scrollTop获得正确的值，而document.body.scrollTop的值为0 当html文档头部不包含有“文档类型声明”时，可以用document.body.scrolltop来获得
-
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth;
-
<el-scrollbar></el-scrollbar> <el-scrollbar style='height:100%'> <ul> <li v-for="(item, index) in menu" :key="item.code" v-bind:class="{active: isActive(item,index), show: toggleMenu
-
当遇到页面顶部header固定的布局结构时，如果在页面中加入了锚点链接的跳转动作，不做处理的情况下点击锚点链接跳到的位置会被header覆盖一部分区域。 这个时候scroll-padding-top属性就派上用场了。scroll-padding-top属性用来定义滚动窗口的最佳查看区域对于顶部的偏移量。我们可以通过给html设置scroll-padding-top的值为一个固定的高度来解决这个问题
-
// pc滚动事件触发 const PC_Scroll = () => { window.addEventListener('scroll', bindHandleScroll); }; const bindHandleScroll = (event) => { // 滚动的高度 const scrollTop = (event.srcElemen
-
Why BSL? Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus). Features
-
<ion-scroll scrollX="true"> </ion-scroll> <ion-scroll scrollY="true"> </ion-scroll> <ion-scroll scrollX="true" scrollY="true"> </ion-scroll> 属性 属性名称 类型 描述 scrollX boolean 是否启用x轴滚动 scrollY boolean 是否启用
-
滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于better-scroll进行封装的组件。 滚动原理 由于 better-scroll 的滚动原理为：在滚动方向上，第一个子元素的长度超过了容器的长度。 那么对于 Scroll 组件，其实就是内容元素.cube-scroll-content在滚动方向上的长度必须大于容器元素 .cube-scroll-wrapper。根据滚动方向的不
-
Google Body是去年Google实验室的工程师利用“20%自由时间”开发的一款人类身体结构浏览器，可以帮助学习美术、解剖和其他医学科目的学生更好的了解 人体结构，同时也可以作为医生和科研工作者的专业研究工具。1月9日，Google宣布将Google Body Viewer开源。在去年7月，Google宣布关闭实验室项目，Google Body也随之过继给Zygote Media，现在的名字
-
无限滚动指令。 引入 import { InfiniteScroll } from 'mint-ui'; Vue.use(InfiniteScroll); 例子 为 HTML 元素添加 v-infinite-scroll 指令即可使用无限滚动。滚动该元素，当其底部与被滚动元素底部的距离小于给定的阈值（通过 infinite-scroll-distance 设置）时，绑定到 v-infinite
-
描述 (Description) 您可以通过添加.scroll类来水平滚动表。 例子 (Example) 以下示例演示了在Foundation中使用scroll table - <!doctype html> <head> <meta charset = "utf-8" /> <meta http-equiv = "x-ua-compatible" content =