react-ios-scroll-lock/dist/react-ios-scroll-lock.css

A lightweight CSS-only scroll lock solution for iOS Safari and Android

:root{--isl-display: block;--isl-inner-display: flex;--isl-opacity: 0;--isl-transition: opacity;--isl-transition-duration: .3s;--isl-transition-easing: ease-in-out;--isl-transition-delay: var(--isl-transition-duration);--isl-zIndex: -1;--isl-vh: 1%;--isl-bg: rgba(255, 255, 255, 1)}.isl_holder{display:var(--isl-display);position:fixed;left:0;top:0;width:100%;height:min(var(--isl-vh) * 100,100%);background-color:var(--isl-bg);overflow:hidden;transition:var(--isl-transition) var(--isl-transition-duration) var(--isl-transition-easing),z-index 0s linear var(--isl-transition-delay);opacity:var(--isl-opacity);z-index:var(--isl-zIndex)}.isl_holder,.isl_holder:before,.isl_holder:after,.isl_holder *,.isl_holder *:before,.isl_holder *:after{box-sizing:border-box}.isl_holder:not(.isl_holder--open),.isl_holder:not(.isl_holder--open) *{pointer-events:none}.isl_holder.isl_holder--contents{--isl-display: contents;--isl-inner-display: contents}.isl_holder.isl_holder--contents,.isl_holder.isl_holder--contents *{pointer-events:auto}.isl_holder.isl_holder--open{--isl-transition-delay: 0s;--isl-opacity: 1;--isl-zIndex: 98}.isl_scroller{display:var(--isl-display);width:100%;height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none}.isl_scroller::-webkit-scrollbar{display:none}.isl_scroller_inner{display:var(--isl-inner-display);-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:column;flex-direction:column;height:calc(100% + 1px);min-height:calc(100% + 1px)}.isl_scroller_content{display:var(--isl-inner-display);-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:column;flex-direction:column;position:-webkit-sticky;position:sticky;width:100%;height:calc(100% - 1px);top:0;bottom:0}