Achieving a sticky scrollbar effect in CSS/JavaScript for scrolling within nested divs

Question

Achieving a sticky scrollbar effect in CSS/JavaScript for scrolling within nested divs

I am trying to create a table with vertical scrolling for the entire table content. Additionally, I need two columns within the table to be scrollable horizontally, but the horizontal scrollbars disappear when the vertical scrollbar is present. How can I keep both vertical and horizontal scrollbars visible at all times?

For reference, here is an example on JSFiddle: Fiddle Example

https://i.sstatic.net/zpGqwz5n.png

#data {
  background: grey;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  height: 400px;
  width: 500px;
}

#splitter {
  display: flex;
  flex-direction: row;
  background: darkgrey;
  overflow-x: hidden;
  overflow-y: auto;
  align-items:start;
}

#right-content {
  background: Gainsboro;
  overflow-x: auto;
  overflow-y: hidden;
}

#left-content {
  background: Gainsboro;
  overflow-x: auto;
  overflow-y: hidden;
}

div {
  margin: 10px;
}

p {
  padding: 2px;
  margin: 0px;
}

<div id="data">
  <div id="splitter">
    <div id="left-content">
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
    </div>
    <div id="right-content">
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
    </div>
  </div>
</div>

javascript html css scrollbar

Answer 1

Answer №1

Here is a code snippet that might be useful for you to experiment with:

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
        height: 100%;
    }
body {
  display: flex;
  padding: 0;
  margin: 0;
}

.myDiv {
  height: 50%;
  overflow: scroll;
  background: LightGrey
}

span {
  width: 100vw;
  height: 150vh;
  display: block;
  background: darkslategrey;
}
</style>
</head>
<body>
<div class="myDiv" id="left-content" style="width:20%" >
      <p>Content on the left side</p>
      <p>Content on the left side</p>
      <p>Content on the left side</p>
      <p>Content on the left side</p>
      <p>Content on the left side</p>
      <span>     
    </div>
    <div class="myDiv" id="right-content" style="width:30%">
      <p>Content on the right side that should horizontally scroll</p>
      <p>Content on the right side that should horizontally scroll</p>
      <p>Content on the right side that should horizontally scroll</p>
      <span>     
    </div>

<script type="text/javascript">
    const divs = document.querySelectorAll('.myDiv');
    divs.forEach(div => div.addEventListener( 'scroll', e => {
    const offsetTop = div.scrollTop / (div.scrollHeight - div.clientHeight);
    const offsetLeft = div.scrollLeft / (div.scrollWidth - div.clientWidth);
    divs.forEach(d => {
       d.scrollTop = offsetTop * (d.scrollHeight - d.clientHeight);
      d.scrollLeft = offsetLeft * (d.scrollWidth - d.clientWidth);
    });
  }) );
</script>
</body>
</html>

Answer 2

Here is a code snippet that might be useful for you to experiment with:

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
        height: 100%;
    }
body {
  display: flex;
  padding: 0;
  margin: 0;
}

.myDiv {
  height: 50%;
  overflow: scroll;
  background: LightGrey
}

span {
  width: 100vw;
  height: 150vh;
  display: block;
  background: darkslategrey;
}
</style>
</head>
<body>
<div class="myDiv" id="left-content" style="width:20%" >
      <p>Content on the left side</p>
      <p>Content on the left side</p>
      <p>Content on the left side</p>
      <p>Content on the left side</p>
      <p>Content on the left side</p>
      <span>     
    </div>
    <div class="myDiv" id="right-content" style="width:30%">
      <p>Content on the right side that should horizontally scroll</p>
      <p>Content on the right side that should horizontally scroll</p>
      <p>Content on the right side that should horizontally scroll</p>
      <span>     
    </div>

<script type="text/javascript">
    const divs = document.querySelectorAll('.myDiv');
    divs.forEach(div => div.addEventListener( 'scroll', e => {
    const offsetTop = div.scrollTop / (div.scrollHeight - div.clientHeight);
    const offsetLeft = div.scrollLeft / (div.scrollWidth - div.clientWidth);
    divs.forEach(d => {
       d.scrollTop = offsetTop * (d.scrollHeight - d.clientHeight);
      d.scrollLeft = offsetLeft * (d.scrollWidth - d.clientWidth);
    });
  }) );
</script>
</body>
</html>

Answer 3

Answer №2

Here is an example of how you can utilize this code:

#data {
  background: grey;
  overflow-x: auto;
  display: inline-block;
  flex-direction: column;
  width: 500px;
}

#splitter {
  display: flex;
  flex-direction: row;
  background: darkgrey;
  align-items:start;
  width:655px;
}

#right-content {
    background: Gainsboro;
    overflow-y: auto;
    width: 450px;
    height: 350px;
}

#left-content {
    background: Gainsboro;
    overflow-y: auto;
    width:180px;
    height: 350px;
}

div {
  margin: 10px;
}

p {
  padding: 2px;
  margin: 0px;
}

<div id="data">
  <div id="splitter">
    <div id="left-content">
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
    </div>
    <div id="right-content">
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>          
    </div>
  </div>
</div>

Answer 4

Here is an example of how you can utilize this code:

#data {
  background: grey;
  overflow-x: auto;
  display: inline-block;
  flex-direction: column;
  width: 500px;
}

#splitter {
  display: flex;
  flex-direction: row;
  background: darkgrey;
  align-items:start;
  width:655px;
}

#right-content {
    background: Gainsboro;
    overflow-y: auto;
    width: 450px;
    height: 350px;
}

#left-content {
    background: Gainsboro;
    overflow-y: auto;
    width:180px;
    height: 350px;
}

div {
  margin: 10px;
}

p {
  padding: 2px;
  margin: 0px;
}

<div id="data">
  <div id="splitter">
    <div id="left-content">
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
    </div>
    <div id="right-content">
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>          
    </div>
  </div>
</div>

Achieving a sticky scrollbar effect in CSS/JavaScript for scrolling within nested divs

Answer №1

Answer №2

Similar questions

Troubleshooting: Images not displaying on webpage due to Ajax, JQuery, and JavaScript integration

What is the most effective way to reduce the spacing between columns in Bootstrap while maintaining consistent spacing on the outer edges?

What could be the reason for my function throwing a TypeError with the message "<function> is not a function"?

In JavaScript with Node.js, how can one verify a file's size and only download the initial kilobyte of the file?

Developing a MySQL DB-driven Node.js dashboard without the need for a poller

Angular 6 issue: Bootstrap 4 carousel indicators not responsive to clicks

What is the best way to retrieve the current URL with a hashtag symbol using JavaScript?

What's the best way to rearrange Bootstrap cards from a horizontal layout to a vertical layout for improved responsiveness?

Retrieve class property in Angular by its name

Issues with HTML keycodes not functioning properly in Firefox

Having trouble transforming the JSON object into a usable format

Using ReactJS and Ruby on Rails to implement an AJAX delete request

Identifying dates in pandas index and header: A comprehensive guide

Leveraging Promises in AngularJS to create a chain between two separate controllers

Ways to move to the next line following the navigation bar text

What steps can I take to stop the textfield from automatically changing the ID "myid" to "myid-tokenfield" when using Tokenfield for Bootstrap?

I encountered an issue with Material UI tabs showing the error message: "Failed prop type: The prop `children` is not supported. Please remove it."

What is the best way to horizontally align a group of list elements while also displaying them side by side?

Positioning borders in an Outlook table

Encase React black box block components and incorporate DOM event listeners