滚动条在使用 overflow: hidden 时无法滚动

huangapple
go评论166阅读模式
英文:

Scroll Bar Won't Scroll When Using Overflow: Hidden

问题

当点击按钮时，会出现一个包含文本的<div>元素，但是文本的大小超过了<div>，所以我将<div>的CSS更改为如下所示：

出现了滚动条，但当我尝试滚动时，什么都不发生。
这是我的HTML：

  1. <div class="exampleDiv">
  2.   <div class="statsheet" id="statsheet">
  3.     <p><b>Bold</b></p>
  4.     <p id="Text">Text</p>
  5.     <p id="Text">Text</p>
  6.     <p id="Text">Text</p>
  7.     <p><b>Bold</b></p>
  8.     <p id="skill1">Skill 1: None</p>
  9.     <p id="skill2">Skill 2: None</p>
  10.     <p id="skill3">Skill 3: None</p>
  11.     <p id="skill4">Skill 4: None</p>
  12.     <p id="skill5">Skill 5: None</p>
  13.     <p><b>Bold</b></p>
  14.     <p id="prof1">Prof. 1: None</p>
  15.     <p id="prof2">Prof. 2: None</p>
  16.     <p id="prof3">Prof. 3: None</p>
  17.     <p id="prof4">Prof. 4: None</p>
  18.     <p id="prof5">Prof. 5: None</p>
  19.     <p id="prof6">Prof. 6: None</p>
  20.     <p id="prof7">Prof. 7: None</p>
  21.   </div>
  22. </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 -->

  1. .exampleDiv {
  2.   background-color: white;
  3.   width: 96vw;
  4.   height: 80vh;
  5.   border-color: gray;
  6.   border-style: solid;
  7.   text-align: center;
  8.   position: relative;
  9.   z-index: -1;
  10.   overflow-y: scroll;
  11.   scroll-behavior: smooth;
  12. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;exampleDiv&quot; &gt;
  2.   &lt;div class=&quot;statsheet&quot; id=&quot;statsheet&quot;&gt;
  3.     &lt;p&gt;&lt;b&gt;Bold&lt;/b&gt;&lt;/p&gt;
  4.     &lt;p id=&quot;Text&quot;&gt;Text&lt;/p&gt;
  5.     &lt;p id=&quot;Text&quot;&gt;Text&lt;/p&gt;
  6.       &lt;p id=&quot;Text&quot;&gt;Text&lt;/p&gt;
  7.       &lt;p&gt;&lt;b&gt;Bold&lt;/b&gt;&lt;/p&gt;
  8.       &lt;p id=&quot;skill1&quot;&gt;Skill 1: None&lt;/p&gt;
  9.       &lt;p id=&quot;skill2&quot;&gt;Skill 2: None&lt;/p&gt;
  10.       &lt;p id=&quot;skill3&quot;&gt;Skill 3: None&lt;/p&gt;
  11.       &lt;p id=&quot;skill4&quot;&gt;Skill 4: None&lt;/p&gt;
  12.       &lt;p id=&quot;skill5&quot;&gt;Skill 5: None&lt;/p&gt;
  13.       &lt;p&gt;&lt;b&gt;Bold&lt;/b&gt;&lt;/p&gt;
  14.       &lt;p id=&quot;prof1&quot;&gt;Prof. 1: None&lt;/p&gt;
  15.       &lt;p id=&quot;prof2&quot;&gt;Prof. 2: None&lt;/p&gt;
  16.       &lt;p id=&quot;prof3&quot;&gt;Prof. 3: None&lt;/p&gt;
  17.       &lt;p id=&quot;prof4&quot;&gt;Prof. 4: None&lt;/p&gt;
  18.       &lt;p id=&quot;prof5&quot;&gt;Prof. 5: None&lt;/p&gt;
  19.       &lt;p id=&quot;prof6&quot;&gt;Prof. 6: None&lt;/p&gt;
  20.       &lt;p id=&quot;prof7&quot;&gt;Prof. 7: None&lt;/p&gt;
  21.   &lt;/div&gt;
  22. &lt;/div&gt;

<!-- end snippet -->

Does anyone know why?

答案1

得分: 2

scrollbar 由于 exampleDiv div 具有 z-index: -1; 以及其位置为 relative 而无法滚动，因此您可以：

将 exampleDiv 的位置更改为其他值，如 absolute。

  1. .exampleDiv {
  2.     background-color: white;
  3.     width: 96vw;
  4.     height: 80vh;
  5.     border-color: gray;
  6.     border-style: solid;
  7.     text-align: center;
  8.     position: absolute;
  9.     z-index: -1;
  10.     overflow-y: scroll;
  11.     scroll-behavior: smooth;
  12. }

或者删除 z-index 或将其设置为大于或等于 0。像这样：

  1. .exampleDiv {
  2.     background-color: white;
  3.     width: 96vw;
  4.     height: 80vh;
  5.     border-color: gray;
  6.     border-style: solid;
  7.     text-align: center;
  8.     position: relative;
  9.     z-index: 0;
  10.     overflow-y: scroll;
  11.     scroll-behavior: smooth;
  12. }

请注意：我删除了 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.

  1. .exampleDiv {
  2.     background-color: white;
  3.     width: 96vw;
  4.     height: 80vh;
  5.     border-color: gray;
  6.     border-style: solid;
  7.     text-align: center;
  8.     position: absolute;
  9.     z-index: -1;
  10.     overflow-y: scroll;
  11.     scroll-behavior: smooth;
  12. }

Or remove z-index or set it greater or equal to 0. Like this:

NOTE: I removed style=&quot;display: none;&quot; because it's not relevant to the question.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .exampleDiv {
  2.   background-color: white;
  3.   width: 96vw;
  4.   height: 80vh;
  5.   border-color: gray;
  6.   border-style: solid;
  7.   text-align: center;
  8.   position: relative;
  9.   z-index: 0;
  10.   overflow-y: scroll;
  11.   scroll-behavior: smooth;
  12. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;exampleDiv&quot; &gt;
  2. 	&lt;div class=&quot;statsheet&quot; id=&quot;statsheet&quot; style=&quot;&quot;&gt;
  3. 	  &lt;p&gt;&lt;b&gt;Bold&lt;/b&gt;&lt;/p&gt;
  4. 	  &lt;p id=&quot;Text&quot;&gt;Text&lt;/p&gt;
  5. 	  &lt;p id=&quot;Text&quot;&gt;Text/p&gt;
  6. 		&lt;p id=&quot;Text&quot;&gt;Text&lt;/p&gt;
  7. 		&lt;p&gt;&lt;b&gt;Bold&lt;/b&gt;&lt;/p&gt;
  8. 		&lt;p id=&quot;skill1&quot;&gt;Skill 1: None&lt;/p&gt;
  9. 		&lt;p id=&quot;skill2&quot;&gt;Skill 2: None&lt;/p&gt;
  10. 		&lt;p id=&quot;skill3&quot;&gt;Skill 3: None&lt;/p&gt;
  11. 		&lt;p id=&quot;skill4&quot;&gt;Skill 4: None&lt;/p&gt;
  12. 		&lt;p id=&quot;skill5&quot;&gt;Skill 5: None&lt;/p&gt;
  13. 		&lt;p&gt;&lt;b&gt;Bold&lt;/b&gt;&lt;/p&gt;
  14. 		&lt;p id=&quot;prof1&quot;&gt;Prof. 1: None&lt;/p&gt;
  15. 		&lt;p id=&quot;prof2&quot;&gt;Prof. 2: None&lt;/p&gt;
  16. 		&lt;p id=&quot;prof3&quot;&gt;Prof. 3: None&lt;/p&gt;
  17. 		&lt;p id=&quot;prof4&quot;&gt;Prof. 4: None&lt;/p&gt;
  18. 		&lt;p id=&quot;prof5&quot;&gt;Prof. 5: None&lt;/p&gt;
  19. 		&lt;p id=&quot;prof6&quot;&gt;Prof. 6: None&lt;/p&gt;
  20. 		&lt;p id=&quot;prof7&quot;&gt;Prof. 7: None&lt;/p&gt;
  21. 	&lt;/div&gt;
  22. &lt;/div&gt;

<!-- 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.

huangapple
  • 本文由 发表于 2023年6月5日 06:36:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76402676.html
  • css
  • html
  • scroll
  • scrollbar
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定