add scrollbar to div instead of scrolling the whole page

Question

I have a page containg a panel on the left and right side. The right side represents a list of items and it might be that this list gets larger than the page height. If that happens, I don't want to scroll the whole page, I only want to scroll this list container. I thought overflow-y: scroll; would do the trick so I created this

$(document).ready(() => {
  for (let i = 0; i < 100; i++) {
    const newDiv = (`<div>Log Item</div>`);
    $("#logsContainer").append(newDiv);
  }
});

#page {
  display: grid;
  grid-template-columns: 50% 50%;
}

#logsContainer {
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page">
  <div>
    Commands
  </div>

  <div>
    <div>
      Logs
    </div>
    <div id="logsContainer">
    </div>
  </div>
</div>

Unfortunately it still creates a scrollbar for the whole page and I can't scroll within the div. How can I create a scrollbar for that list only if the items in the list are too many to display?

the container needs a set height otherwise it is just going to expand with the content — Patrick Evans, Nov 18 '19 at 16:01

score 1 · Accepted Answer · answered Nov 18 '19 at 16:01

1

Try this code, to make the height fixed and show the scrollbar:

.logsContainer {
    height: 200px;
    overflow-y: scroll;
    overflow-x:hidden;
}

answered Nov 18 '19 at 16:01

user2342558

5,567
5
33
54

Is it possible to set a dynamic height like "stretch to the bottom?" – Nov 18 '19 at 16:03

score 0 · Answer 2 · answered Nov 18 '19 at 16:04

0

.logsContainer {overflow:auto;height:200px;}

In general, it's not a good idea to mix overflow-x and overflow-y. The browser won't honour the split settings.

If you MUST clip off the other scroll bar, use an outer container and overflow:hidden.

answered Nov 18 '19 at 16:04

Ian Heisler

111
6

add scrollbar to div instead of scrolling the whole page

2 Answers2