Skip to content

Commit

Permalink
Merge pull request #10 from rick-liruixin/feature/1.0.3.1
Browse files Browse the repository at this point in the history 
add type="module"  add vanilla-js examples
  • Loading branch information
@rick-liruixin
rick-liruixin committed Jun 28, 2023
2 parents 2296c95 + f684c2b commit b198f3c
Show file tree
Hide file tree
Showing 8 changed files with 860 additions and 21 deletions.
2 changes: 0 additions & 2 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ pnpm-debug.log*
lerna-debug.log*

node_modules
dist
lib
dist-ssr
*.local

Expand Down
44 changes: 25 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,31 +236,37 @@ export class SomeComponent implements OnDestroy {

##### Vanilla JS

In the html:

```html
<head>
<script src="some-path-where-you-dump-the-javascript-libraries/lib/bodyScrollLock.js"></script>
</head>
```

Then in the javascript:

```javascript
// 1. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
// Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
// This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
const targetElement = document.querySelector("#someElementId");

// 2. ...in some event handler after showing the target element...disable body scroll
bodyScrollLock.disableBodyScroll(targetElement);
<script type="module">
// https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.0.3.1/lib/index.esm.js
// https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.0.3.1/lib/index.esm.js.map

import {
clearAllBodyScrollLocks,
disableBodyScroll,
enableBodyScroll,
} from "https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.0.3.1/lib/index.esm.js";

// 1. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
// Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
// This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
const targetElement = document.querySelector("#someElementId");

// 2. ...in some event handler after showing the target element...disable body scroll
disableBodyScroll(targetElement);

// 3. ...in some event handler after hiding the target element...
enableBodyScroll(targetElement);

// 4. Useful if we have called disableBodyScroll for multiple target elements,
// and we just want a kill-switch to undo all that.
clearAllBodyScrollLocks();

// 3. ...in some event handler after hiding the target element...
bodyScrollLock.enableBodyScroll(targetElement);
</script>

// 4. Useful if we have called disableBodyScroll for multiple target elements,
// and we just want a kill-switch to undo all that.
bodyScrollLock.clearAllBodyScrollLocks();
```

## Demo
Expand Down
333 changes: 333 additions & 0 deletions examples/vanilla-js/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,333 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.dialog {
display: none;
width: 70%;
height: 70%;
position: fixed;
top: 15%;
left: 15%;
overflow-y: auto;
z-index: 10;
color: #000;
background-color: #fff;
}
.mask {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #0000005e;
z-index: 9;
}
</style>
</head>
<body>
<button id="open">open dialog</button>
<div class="dialog body-scroll-lock-ignore">
<br />
<button id="close">close dialog</button>
<br />
<br />
<p class="read-the-docs">
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
</p>
</div>
<div class="mask"></div>

<p class="read-the-docs">
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
</p>

<script type="module">
import {
clearAllBodyScrollLocks,
disableBodyScroll,
enableBodyScroll,
} from "../../lib/index.esm.js";
const open = () => {
document.querySelector(".dialog").style.display = "block";
document.querySelector(".mask").style.display = "block";
const targetElement = document.querySelector(".dialog");
disableBodyScroll(targetElement);
};
const close = () => {
document.querySelector(".dialog").style.display = "none";
document.querySelector(".mask").style.display = "none";
const targetElement = document.querySelector(".dialog");
enableBodyScroll(targetElement);
};
document.getElementById("open").addEventListener("click", open);
document.getElementById("close").addEventListener("click", close);
</script>
</body>
</html>
Loading

0 comments on commit b198f3c

Please sign in to comment.