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 (i.e. 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>

score 1 · Accepted Answer · answered Feb 05 '21 at 09:48

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>

Thank you! Using `max-height` made it work, and BTW it works also if I keep the original declaration of `overflow: scroll`. — Cirrocumulus, Feb 05 '21 at 10:53

score 0 · Answer 2 · answered Feb 05 '21 at 08:57

0

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

answered Feb 05 '21 at 08:57

Anush Bhatia

482
3
8

score 0 · Answer 3 · answered Feb 05 '21 at 08:58

0

See Making the main scrollbar always visible

overflow-y:scroll;

might fix your problem.

answered Feb 05 '21 at 08:58

yacho

45
2
9

Thanks. Unfortunately this doesn't change the behaviour (either by adding it or replacing the above `overflow` value). – Cirrocumulus Feb 05 '21 at 09:08

gusarov.f · Answer 4 · 2021-02-05T09:31:16.913

0

Just add height to your #wordlist div.

edited Feb 05 '21 at 09:31

answered Feb 05 '21 at 08:58

gusarov.f

26
2

I tried that. This indeed adds the scrollbar as expected but the problem with adding height (either a percentage or a pixel value) is that at the beginning (when the `#wordlist` div is empty), the inserted `.word` divs are no longer aligned to the bottom of of the containing div, but to the top instead. Only when the container div is full and the scrollbar appears do the new elements appear where they should (i.e. at the bottom of the container and on the center of the page). – Cirrocumulus Feb 05 '21 at 09:12

score 0 · Answer 5 · answered Feb 05 '21 at 11:23

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>

CSS scrolling with top overflow

5 Answers5