Reputation: 630

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

Upvotes: 1

Answers (5)

Neha Jha

Reputation: 291

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>

Upvotes: 0

Vaibhav

Reputation: 602

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>

Upvotes: 1