CSS scrolling with top overflow
Question
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). 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
#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 answers
solution1
1 ACCPTED 2021-02-05 09:48:13
Try this.
Add a max-height to the div . This will make sure that the height of the div shouldn't go beyond the max-height . Then, add overflow: auto . This will make sure that when the height goes beyond the max-height , scrollbars should appear.
overflow: auto; works for both width and height . If you want to be specify, you can always 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.
#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>
solution2
0 2021-02-05 08:57:43
Try changing the 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
solution3
0 2021-02-05 08:58:38
solution4
0 2021-02-05 08:58:45
Just add height to your #wordlist div.
solution5
0 2021-02-05 11:23:59
I think you are missing the 'height' CSS property. 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.
$("#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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.