CSS 滚动顶部溢出
[英]CSS scrolling with top overflow
问题描述
I am trying to make div elements containing short text strings appear (using JS) in the middle of a blank page, with new elements always centered and older elements moving upwards (similar to what a console or terminal session would look like).
我试图使包含短文本字符串的 div 元素出现在空白页面的中间（使用 JS），新元素始终居中，旧元素向上移动（类似于控制台或终端 session 的样子）。 Elements that disappear at the top of the page should be viewed by scrolling upwards (ie back in time).在页面顶部消失的元素应该通过向上滚动（即回到过去）来查看。
The following code works but scroll bars don't appear.以下代码有效，但不出现滚动条。 Why is that?这是为什么？
HTML HTML
#wordlist { position: fixed; overflow: scroll; margin: 0 auto; bottom: 50%; left: 40%; text-align: left; }.word { // Just font and color }
<body> <div id="wordlist"> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word" id="current">whatever</div> </div> </body>
5 个解决方案
解决方案1
1 已采纳 2021-02-05 09:48:13
Try this.尝试这个。
Add a max-height to the div .将max-height添加到div 。 This will make sure that the height of the div shouldn't go beyond the max-height .这将确保div的高度不应 go 超出max-height 。 Then, add overflow: auto .然后，添加overflow: auto 。 This will make sure that when the height goes beyond the max-height , scrollbars should appear.这将确保当高度超过max-height时，应该出现滚动条。
overflow: auto; works for both width and height .适用于width和height 。 If you want to be specify, you can always go for overflow-y: auto;如果你想被指定，你总是可以 go for overflow-y: auto; . .
Also, I forgot to mention that max-height will not unnecessarily maintain a fixed height if the children are less.另外，我忘了提到如果孩子少， max-height不会不必要地保持固定高度。
#wordlist { position: fixed; overflow: auto; margin: 0 auto; max-height: 100px; bottom: 50%; left: 40%; text-align: left; }.word { // Just font and color }
<body> <div id="wordlist"> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word" id="current">whatever</div> </div> </body>
解决方案2
0 2021-02-05 08:57:43
Try changing the overflow: auto尝试更改overflow: auto
Sample of this can be found here可以在此处找到此示例
https://webdesign.tutsplus.com/tutorials/how-to-hide-reveal-a-sticky-header-on-scroll-with-javascript--cms-33756 https://webdesign.tutsplus.com/tutorials/how-to-hide-reveal-a-sticky-header-on-scroll-with-javascript--cms-33756
解决方案3
0 2021-02-05 08:58:38
See Making the main scrollbar always visible请参阅使主滚动条始终可见
overflow-y:scroll;
might fix your problem.可能会解决您的问题。
解决方案4
0 2021-02-05 08:58:45
Just add height to your #wordlist div.只需将高度添加到您的#wordlist div。
解决方案5
0 2021-02-05 11:23:59
I think you are missing the 'height' CSS property.我认为您缺少“高度” CSS 属性。 Mentioning an appropriate pixel value as height, and implementing 'scrollTop()' method on the id of the container upto its height will help in showing the scrollbar at the bottom.提到一个适当的像素值作为高度，并在容器的 id 上实现 'scrollTop()' 方法直到其高度将有助于在底部显示滚动条。
$("#wordlist").scrollTop($('#wordlist').height())
#wordlist { position: fixed; overflow-y: scroll; margin: 0 auto; bottom: 50%; left: 40%; height: 100px; text-align: left; }.word { // Just font and color }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div id="wordlist"> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word">whatever</div> <div class="word" id="current">Latest Value</div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.