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>

Vaibhav · Accepted Answer · 2021-02-05 09:48:13Z

1

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>

answered Feb 5, 2021 at 9:48

Vaibhav

6126 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cirrocumulus Over a year ago

Thank you! Using max-height made it work, and BTW it works also if I keep the original declaration of overflow: scroll.

Anush Bhatia · Accepted Answer · 2021-02-05 08:57:43Z

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 5, 2021 at 8:57

Anush Bhatia

7025 silver badges9 bronze badges

Comments

yacho · Accepted Answer · 2021-02-05 08:58:38Z

0

See Making the main scrollbar always visible

overflow-y:scroll;

might fix your problem.

answered Feb 5, 2021 at 8:58

yacho

753 silver badges10 bronze badges

1 Comment

Cirrocumulus Over a year ago

Thanks. Unfortunately this doesn't change the behaviour (either by adding it or replacing the above overflow value).

gusarov.f · Accepted Answer · 2021-02-05 09:31:16Z

0

Just add height to your #wordlist div.

edited Feb 5, 2021 at 9:31

answered Feb 5, 2021 at 8:58

gusarov.f

262 bronze badges

1 Comment

Cirrocumulus Over a year ago

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

Neha Jha · Accepted Answer · 2021-02-05 11:23:59Z

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>

Collectives™ on Stack Overflow

CSS scrolling with top overflow

5 Answers 5

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related