Как запретить скролл не ставя overflow:hidden

109
30 апреля 2021, 14:30

Как оставить полосу прокрутки и при этом запретить скролл на странице? Открывается модалка, и при этом, чтобы не было скролла всему html, который выше в несколько раз окна браузера, добавляется overflow:hidden, но при этом получается эффект прыгания по горизонтали из за того что полоса прокрутки то появляется, то исчезает. Как запретить скролл фона модалки не добавляя overflow:hidden, то есть оставив полосу прокрутки?

html{ 
	position:relative; 
	margin:0 auto; 
	/*overflow:hidden; - не нужно использовать*/ 
	height:100vh; 
	width:100%; 
} 
html body:after{ 
	content:''; 
	background-color:rgba(0, 0, 0, 0.5); 
	position:fixed; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	z-index:9; 
} 
modal { 
    position: fixed; 
    overflow-y: auto; 
    z-index: 25; 
    top: 0; 
    bottom: 0; 
    width: 18.75rem; 
    right: 0; 
    padding: 4.125rem 1rem 1rem; 
    background-color: #fff; 
}
<modal>modal</modal> 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3

UPD: Должна остаться функция скролла внутри модалки. И нельзя потерять позицию в основном контенте при открытии модалки, поэтому position:fixed не подходит.

Answer 1

position: sticky;

html { 
  position: sticky; 
  margin: 0 auto; 
  /*overflow:hidden; - не нужно использовать*/ 
  height: 100vh; 
  width: 100%; 
  top: 0; 
} 
 
html body:after { 
  content: ''; 
  background-color: rgba(0, 0, 0, 0.5); 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 9; 
} 
 
modal { 
  position: fixed; 
  overflow-y: auto; 
  z-index: 25; 
  top: 0; 
  bottom: 0; 
  width: 18.75rem; 
  right: 0; 
  padding: 4.125rem 1rem 1rem; 
  background-color: #fff; 
}
<modal>modal</modal> 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3 
<br>1 
<br>2 
<br>3

READ ALSO
Как однозначно с позиционировать гейм объекты во время переключения между сценами?
c#

Как однозначно с позиционировать гейм объекты во время переключения между сценами?

У меня GameObject-ы вложены в родительский объект "Vehicles":

 185
GetExternalLoginInfoAsync при авторизации через Facebook возвращает null
c#

GetExternalLoginInfoAsync при авторизации через Facebook возвращает null

Я добавил авторизацию через facebook в Startup, решил уже туда все что можно запихать в попытках решить проблему:

 90
wpf dependency property add owner
c#

wpf dependency property add owner

В книге Петцольда есть следующий пример:

 110
Как записать консольный код AngleSharp в форме?
c#

Как записать консольный код AngleSharp в форме?

На вебстранице показан код парсера в консолиХотелось бы научиться получать результат парсинга сайта в textbox формы

 101