mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-29 06:49:06 +02:00
Code Issues Releases Wiki Activity

Decouple Modal's scrollbar functionality (#33245)

Browse Source
This commit is contained in:
GeoSot
2021-04-11 09:37:59 +03:00
committed by GitHub
parent 2d2f5b3dfd
commit 7b7f4a5ced
4 changed files with 27 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
js/src/util/scrollbar.js
View File

@@ -8,7 +8,7 @@
import SelectorEngine from '../dom/selector-engine'
import Manipulator from '../dom/manipulator'
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed'
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
const SELECTOR_STICKY_CONTENT = '.sticky-top'
const getWidth = () => {
@@ -19,6 +19,7 @@ const getWidth = () => {
const hide = (width = getWidth()) => {
document.body.style.overflow = 'hidden'
// trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth
_setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width)
_setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width)
_setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width)
@@ -49,7 +50,7 @@ const reset = () => {
const _resetElementAttributes = (selector, styleProp) => {
SelectorEngine.find(selector).forEach(element => {
const value = Manipulator.getDataAttribute(element, styleProp)
if (typeof value === 'undefined' && element === document.body) {
if (typeof value === 'undefined') {
element.style.removeProperty(styleProp)
} else {
Manipulator.removeDataAttribute(element, styleProp)