英文:
Scroll Bar Won't Scroll When Using Overflow: Hidden
问题
当点击按钮时，会出现一个包含文本的<div>元素，但是文本的大小超过了<div>，所以我将<div>的CSS更改为如下所示：
出现了滚动条，但当我尝试滚动时，什么都不发生。
这是我的HTML：
<div class="exampleDiv">
<div class="statsheet" id="statsheet">
<p><b>Bold</b></p>
<p id="Text">Text</p>
<p id="Text">Text</p>
<p id="Text">Text</p>
<p><b>Bold</b></p>
<p id="skill1">Skill 1: None</p>
<p id="skill2">Skill 2: None</p>
<p id="skill3">Skill 3: None</p>
<p id="skill4">Skill 4: None</p>
<p id="skill5">Skill 5: None</p>
<p><b>Bold</b></p>
<p id="prof1">Prof. 1: None</p>
<p id="prof2">Prof. 2: None</p>
<p id="prof3">Prof. 3: None</p>
<p id="prof4">Prof. 4: None</p>
<p id="prof5">Prof. 5: None</p>
<p id="prof6">Prof. 6: None</p>
<p id="prof7">Prof. 7: None</p>
</div>
</div>
有人知道为什么吗？
英文:
I am creating a webpage, and when a button is clicked a <div> element containing text appears. However, the text is bigger than the div so I changed the div's css to look like this:
A scroll bar appears, but when I try scrolling, nothing happens.
Here is my HTML
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.exampleDiv {
background-color: white;
width: 96vw;
height: 80vh;
border-color: gray;
border-style: solid;
text-align: center;
position: relative;
z-index: -1;
overflow-y: scroll;
scroll-behavior: smooth;
}
<!-- language: lang-html -->
<div class="exampleDiv" >
<div class="statsheet" id="statsheet">
<p><b>Bold</b></p>
<p id="Text">Text</p>
<p id="Text">Text</p>
<p id="Text">Text</p>
<p><b>Bold</b></p>
<p id="skill1">Skill 1: None</p>
<p id="skill2">Skill 2: None</p>
<p id="skill3">Skill 3: None</p>
<p id="skill4">Skill 4: None</p>
<p id="skill5">Skill 5: None</p>
<p><b>Bold</b></p>
<p id="prof1">Prof. 1: None</p>
<p id="prof2">Prof. 2: None</p>
<p id="prof3">Prof. 3: None</p>
<p id="prof4">Prof. 4: None</p>
<p id="prof5">Prof. 5: None</p>
<p id="prof6">Prof. 6: None</p>
<p id="prof7">Prof. 7: None</p>
</div>
</div>
<!-- end snippet -->
Does anyone know why?
答案1
得分: 2
scrollbar 由于 exampleDiv div 具有 z-index: -1; 以及其位置为 relative 而无法滚动，因此您可以：
将 exampleDiv 的位置更改为其他值，如 absolute。
.exampleDiv {
background-color: white;
width: 96vw;
height: 80vh;
border-color: gray;
border-style: solid;
text-align: center;
position: absolute;
z-index: -1;
overflow-y: scroll;
scroll-behavior: smooth;
}
或者删除 z-index 或将其设置为大于或等于 0。像这样：
.exampleDiv {
background-color: white;
width: 96vw;
height: 80vh;
border-color: gray;
border-style: solid;
text-align: center;
position: relative;
z-index: 0;
overflow-y: scroll;
scroll-behavior: smooth;
}
请注意：我删除了 style="display: none;"，因为它与问题无关。
如您所见，如果将 z-index: 0; 设置为滚动将起作用，如果将其返回到 z-index: -1;，则滚动将被冻结。
英文:
The scrollbar is not scrolling because of exampleDiv div z-index: -1; and also its position is relative, so you can:
Change exampleDiv position to something else like absolute.
.exampleDiv {
background-color: white;
width: 96vw;
height: 80vh;
border-color: gray;
border-style: solid;
text-align: center;
position: absolute;
z-index: -1;
overflow-y: scroll;
scroll-behavior: smooth;
}
Or remove z-index or set it greater or equal to 0. Like this:
NOTE: I removed style="display: none;" because it's not relevant to the question.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.exampleDiv {
background-color: white;
width: 96vw;
height: 80vh;
border-color: gray;
border-style: solid;
text-align: center;
position: relative;
z-index: 0;
overflow-y: scroll;
scroll-behavior: smooth;
}
<!-- language: lang-html -->
<div class="exampleDiv" >
<div class="statsheet" id="statsheet" style="">
<p><b>Bold</b></p>
<p id="Text">Text</p>
<p id="Text">Text/p>
<p id="Text">Text</p>
<p><b>Bold</b></p>
<p id="skill1">Skill 1: None</p>
<p id="skill2">Skill 2: None</p>
<p id="skill3">Skill 3: None</p>
<p id="skill4">Skill 4: None</p>
<p id="skill5">Skill 5: None</p>
<p><b>Bold</b></p>
<p id="prof1">Prof. 1: None</p>
<p id="prof2">Prof. 2: None</p>
<p id="prof3">Prof. 3: None</p>
<p id="prof4">Prof. 4: None</p>
<p id="prof5">Prof. 5: None</p>
<p id="prof6">Prof. 6: None</p>
<p id="prof7">Prof. 7: None</p>
</div>
</div>
<!-- end snippet -->
As you can see if you set z-index: 0; the scroll will work, if you return it to z-index: -1; then the scroll will freeze.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论