主页 / 问题 / 1007616
Accepted
kizoso
Asked:2020-07-29 02:03:02 +0000 UTC2020-07-29 02:03:02 +0000 UTC

如何在不设置溢出的情况下禁用滚动：隐藏

  • 772

如何在离开滚动条的同时禁用页面滚动？一个modal打开，同时为了避免滚动到所有比浏览器窗口高几倍的html，加了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：modal里面应该有滚动功能。并且在打开模态框时不能在主要内容中丢失位置，因此 position:fixed 是不合适的。

javascript

1 个回答

  1. Best Answer

    位置：粘性；

    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

    • 3

相关问题