generated from phucbm/gulp-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #37 from viivue/staging-fix-jumping-scrollbar-on-open
Fix jumping scrollbar on open
- Loading branch information
Showing
9 changed files
with
174 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| ## FAQ | ||
|
|
||
| <details> | ||
| <summary>1. The page got jumping when the popup is shown. How to fix it?</summary> | ||
|
|
||
| You need to understand how `preventScroll` works in Easy Popup. | ||
| When you enable the `preventScroll` option: | ||
|
|
||
| 1. Easy Popup adds an `ep-prevent-scroll` class to the `<body>`. | ||
| - This sets `overflow: hidden` to prevent page scrolling. | ||
| 2. Hiding the scrollbar can cause the page to shift right. | ||
| 3. To prevent shifting, Easy Popup adds `padding-right` to the `<body>`. | ||
| - The padding is equal to the scrollbar width. | ||
| 4. The scrollbar width is auto-calculated by JavaScript. | ||
| - Note: This may not be 100% accurate across all browsers/devices. | ||
|
|
||
| Easy Popup has a built-in function to calculate the scrollbar width automatically depending on the browser/device. | ||
| However, this may not work as expected in some cases. | ||
|
|
||
| For optimal results: | ||
|
|
||
| - Set the scrollbar width via CSS. | ||
| - Use the same value for the `scrollbarWidth` option in Easy Popup. | ||
|
|
||
| ```css | ||
| /* custom scrollbar */ | ||
| /* Works on Chrome, Edge, and Safari */ | ||
| body::-webkit-scrollbar { | ||
| width:8px; | ||
| } | ||
|
|
||
| body::-webkit-scrollbar-track { | ||
| background:#ccc; | ||
| } | ||
|
|
||
| body::-webkit-scrollbar-thumb { | ||
| background-color:#000; | ||
| } | ||
| ``` | ||
|
|
||
| Easy Popup options | ||
|
|
||
| ```json | ||
| { | ||
| "preventScroll": true, | ||
| "scrollbarWidth": 8 | ||
| } | ||
| ``` | ||
|
|
||
| Note: On touch screen, the scrollbar width is set to `0` automatically. | ||
|
|
||
| </details> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import {isMobile} from "./isMobile"; | ||
|
|
||
| /** | ||
| * To prevent page jump when popup is open, we add a padding-right to the body, this is the width of the scrollbar. | ||
| * Scrollbar width is different between browsers and OS, so we need to calculate it. | ||
| * But sometimes, the scrollbar width can be changed by using ::-webkit-scrollbar CSS, so the calculation is not 100% accurate. | ||
| * So we allow the user to set the scrollbar width manually via the `scrollbarWidth` option. | ||
| */ | ||
| export function getScrollbarWidth(context){ | ||
| if(isMobile()){ | ||
| // console.log('EasyPopup: Mobile or touch device detected, no need to calculate scrollbar width'); | ||
| return 0; | ||
| } | ||
|
|
||
| const {scrollbarWidth} = context.options; | ||
|
|
||
| if(scrollbarWidth === undefined){ | ||
| return getDetectedScrollbarWidth(); | ||
| } | ||
|
|
||
| if(typeof scrollbarWidth === 'number'){ | ||
| return scrollbarWidth; | ||
| } | ||
|
|
||
| console.warn('EasyPopup: `scrollbarWidth` must be a number, fallback to auto-detect'); | ||
| return getDetectedScrollbarWidth(); | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Get scrollbar width | ||
| * Not 100% accurate, but it's the best way to get the scrollbar width | ||
| * https://stackoverflow.com/a/986977/6453822 | ||
| * @returns {number} | ||
| */ | ||
| function getDetectedScrollbarWidth(outerElement = document.body){ | ||
| // Use provided element or create a new div | ||
| const outer = outerElement || document.createElement('div'); | ||
|
|
||
| // Store original styles | ||
| const originalStyles = { | ||
| visibility: outer.style.visibility, | ||
| overflow: outer.style.overflow, | ||
| msOverflowStyle: outer.style.msOverflowStyle | ||
| }; | ||
|
|
||
| // Apply necessary styles | ||
| outer.style.visibility = 'hidden'; | ||
| outer.style.overflow = 'scroll'; // forcing scrollbar to appear | ||
| outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps | ||
|
|
||
| if(!outerElement){ | ||
| document.body.appendChild(outer); | ||
| } | ||
|
|
||
| // Creating inner element and placing it in the container | ||
| const inner = document.createElement('div'); | ||
| outer.appendChild(inner); | ||
|
|
||
| // Calculating difference between container's full width and the child width | ||
| const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth); | ||
|
|
||
| // Cleaning up | ||
| outer.removeChild(inner); | ||
|
|
||
| if(!outerElement){ | ||
| outer.parentNode.removeChild(outer); | ||
| }else{ | ||
| // Restore original styles | ||
| outer.style.visibility = originalStyles.visibility; | ||
| outer.style.overflow = originalStyles.overflow; | ||
| outer.style.msOverflowStyle = originalStyles.msOverflowStyle; | ||
| } | ||
|
|
||
| return scrollbarWidth; | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.