Skip to content

Commit

Permalink
README md small fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
memob0x committed Dec 21, 2020
1 parent af65a50 commit 6d91f7d
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 7 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ A small "CSS helper" script (~4K gzipped) which relies on **CSS variables** in o

🙅 Without this library:

![without scrollbar gap compensation](https://github.com/[username]/[reponame]/blob/[branch]/docs/without-gap-compensation.gif?raw=true)
![without scrollbar gap compensation](https://github.com/memob0x/scroll-padlock/blob/master/docs/without-gap-compensation.gif?raw=true)

💁 With this library:

![with scrollbar gap compensation](https://github.com/[username]/[reponame]/blob/[branch]/docs/with-gap-compensation.gif?raw=true)
![with scrollbar gap compensation](https://github.com/memob0x/scroll-padlock/blob/master/docs/with-gap-compensation.gif?raw=true)

## TL;TR: a body scroll overview

Expand Down Expand Up @@ -181,7 +181,7 @@ html.scroll-padlock--locked aside {

There are some edge cases in which iOS doesn't play nice: when the page is scrolled the **system bars** become smaller, at that point when the keyboard tray is triggered they become larger again; that can cause visual artifacts as you can see the following gif.

![ios bug](https://github.com/[username]/[reponame]/blob/[branch]/docs/ios-bug.gif?raw=true)
![ios bug](https://github.com/memob0x/scroll-padlock/blob/master/docs/ios-bug.gif?raw=true)

That's because the element on focus is an input element and iOS forces a scroll to that element (to enhance the accessibility) on an area which would be shortly resized because of the system bars getting bigger. Pretty weird, huh?

Expand All @@ -197,15 +197,15 @@ document.documentElement.addEventListener("scrollpadlockresize", () => {

As you can see in the following gif, things are finally back in place.

![ios bug](https://github.com/[username]/[reponame]/blob/[branch]/docs/ios-fix.gif?raw=true)
![ios bug](https://github.com/memob0x/scroll-padlock/blob/master/docs/ios-fix.gif?raw=true)

## Support

All [modern browsers](https://teamtreehouse.com/community/what-is-a-modern-browser) have been tested, but here's a list of dependencies that might be needed in order to support older ones:
* 💥 DOM API "[matches](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill)" method ([polyfill](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill))
* 💥 [WeakMap](https://caniuse.com/mdn-javascript_builtins_weakmap)
* [CustomEvent](https://caniuse.com/customevent) ([polyfill](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill)), only if library [events](#events) are being used
* [CSS variables](https://caniuse.com/css-variables), only for scrollbar gaps compensation (since old browsers support _overflow: hidden;_), still the JS API and events can be used to reach a workaround
* [CSS variables](https://caniuse.com/css-variables), only for scrollbar gaps compensation (since old browsers support _overflow: hidden_), still the JS API and events can be used to reach a workaround

## Demo

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "Locks elements scroll handling scrollbar gaps and iOS Safari with CSS variables",
"main": "dist/umd/scroll-padlock.min.js",
"module": "dist/es/scroll-padlock.js",
"version": "1.1.1",
"version": "1.1.2",
"license": "MIT",
"repository": "https://github.com/memob0x/scroll-padlock.git",
"scripts": {
Expand Down

0 comments on commit 6d91f7d

Please sign in to comment.