How to make element scrollable?

CodeIsNice :

I want to make a scrollbar in a div element.

So I try it like this:

#roomlist {
  width: 250px;
  /* max-height: 100%; */
  /* overflow-y: hidden; */
  overflow: scroll;
  max-width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -210px;
  background-color: #91c7e1;
  transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.8);
  z-index: 1;
  margin-top: 70px;
}

<div id="roomlist">
  <div id='ex1'>
    <ul id="roomlistul"></ul>
  </div>

And yes you see the up arrow and down arrow. But you dont see the actual beam so that you can scroll. See image what I mean

If I do it like this:

  <div id="roomlist">
          <div id='ex1'>
            <ul id="roomlistul"></ul>
          </div>
        </div>

and this:

#ex1 {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

I don't see the scrollbar

Madhavendra Dutt :

create css

.scroll-box {
    overflow-y: auto;
    height: 400px;
}

usage

<div class="scroll-box">
    <div>content height more than 400px</div>
</div>

once the content height is more than 400px, in this example, then scroll bar will appear.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=368169&siteId=1