Skip to content

Commit cc66c70

Browse files
committed
README.md upd
package.json upd
1 parent 79a6b85 commit cc66c70

File tree

2 files changed

+73
-1
lines changed

2 files changed

+73
-1
lines changed

README.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,27 @@
22

33
The initial idea was to lock the body scroll on iOS Safari whenever we see fit, turns out we made something that works everywhere on the web<br />This was achieved with overscroll-behaviour css property
44

5+
Most workarounds involve JavaScript, touchmove event listeners, or weird side effects. I wanted something simpler — so I built react-ios-scroll-lock: a CSS-only scroll lock component that works across iOS, Android, and all major browsers.
6+
7+
⚡️ Pure CSS – no JS scroll hacks (JS used only to measure device height and detect iOS)
8+
9+
🧘 Doesn’t interfere with touch or scroll events
10+
11+
📱 Works on iOS, Android, and desktop
12+
13+
🪶 Minimal performance cost
14+
15+
🧩 Easy to plug into any React project
16+
517
### Medium Article: [https://stripearmy.medium.com/i-fixed-a-decade-long-ios-safari-problem-0d85f76caec0](https://stripearmy.medium.com/i-fixed-a-decade-long-ios-safari-problem-0d85f76caec0)
618

719
### Demo: (desktop demo will be available soon) [https://stripearmy.github.io/ios-scroll-lock-demo/](https://stripearmy.github.io/ios-scroll-lock-demo/)
820

21+
### Demo (simple yes/no modal): [https://stripearmy.github.io/ios-scroll-lock-demo/simple.html](https://stripearmy.github.io/ios-scroll-lock-demo/simple.html)
22+
23+
### Demo (modal with scrollable content): [https://stripearmy.github.io/ios-scroll-lock-demo/scrollable.html](https://stripearmy.github.io/ios-scroll-lock-demo/scrollable.html)
24+
25+
926
## Installation
1027

1128
$ npm install react-ios-scroll-lock
@@ -58,7 +75,7 @@ import 'react-ios-scroll-lock/css';
5875
<IosScrollLock bgColor="var(--yourCustomBgColor)">
5976
```
6077

61-
### Render the component contents ONLY wherever you want by using the optional "isInline" (boolean) attribute<br /><br />Note: Disables the effects of "isOpen" attribute
78+
### Render the component contents ONLY wherever you want by using the optional "isInline" (boolean) attribute<br /><br />Note: Disables the effects of "isOpen" attribute<br/><br/>Can be useful if you don't want to render same component/content twice, once inside a page and once inside a modal, you can achieve both functionalities by utilizing "isInline"
6279

6380
```javascript
6481
<IosScrollLock isInline={true}>

package.json

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,68 @@
11
{
22
"name": "react-ios-scroll-lock",
3+
"author": "Arsen Mkrtchyan (stripearmy)",
34
"private": false,
45
"version": "1.0.0",
6+
"description": "A lightweight CSS-only scroll lock solution for iOS Safari and Android",
57
"type": "module",
68
"main": "dist/react-ios-scroll-lock.umd.js",
79
"module": "dist/react-ios-scroll-lock.es.js",
810
"types": "dist/index.d.ts",
911
"repository": "https://github.com/stripearmy/react-ios-scroll-lock.git",
1012
"license": "MIT",
13+
"keywords": [
14+
"react",
15+
"scroll lock",
16+
"scroll lock css",
17+
"scroll-lock",
18+
"scroll-lock css",
19+
"ios scroll lock",
20+
"ios scroll lock css",
21+
"ios-scroll-lock",
22+
"ios-scroll-lock-css",
23+
"body scroll lock",
24+
"body scroll lock css",
25+
"body-scroll-lock",
26+
"body-scroll-lock-css",
27+
"modal scroll lock",
28+
"modal scroll lock css",
29+
"modal-scroll-lock",
30+
"modal-scroll-lock-css",
31+
"ios safari",
32+
"ios-safari",
33+
"mobile scroll lock",
34+
"mobile scroll lock css",
35+
"mobile-scroll-lock",
36+
"mobile-scroll-lock-css",
37+
"touch scroll lock",
38+
"touch scroll lock css",
39+
"touch-scroll-lock",
40+
"touch-scroll-lock-css",
41+
"react modal scroll",
42+
"react modal scroll css",
43+
"react-modal-scroll",
44+
"react-modal-scroll-css",
45+
"ios bug",
46+
"ios bug css",
47+
"ios-bug",
48+
"ios-bug-css",
49+
"android scroll lock",
50+
"android scroll lock css",
51+
"android-scroll-lock",
52+
"android-scroll-lock-css",
53+
"overflow hidden",
54+
"overflow-hidden",
55+
"disable scroll",
56+
"disable-scroll",
57+
"disable scroll css",
58+
"disable-scroll-css",
59+
"pure css scroll lock",
60+
"pure-css-scroll-lock",
61+
"lightweight scroll lock",
62+
"lightweight-scroll-lock",
63+
"lightweight scroll lock css",
64+
"lightweight-scroll-lock-css"
65+
],
1166
"files": [
1267
"dist",
1368
"styles"

0 commit comments

Comments
 (0)