Scrolling a div from an outer div

css, html, javascript

Solution

Well after hours of hacking with no luck I decided to disect some of the existing libraries to see how they were accomplishing this. Unfortunately I was sorely disappointed. All of them were using javascript.

The up side to this is that the it only requires a small bit of code not that that means it will perform well. To make this perform as well as possible I'm updating the header when required in the x direction. Since this will typically be a small area in my case it should be good enough.

Hundredth times a charm!

fiddle

Here's the basic:

HTML

<div class=grid>
    <div class=grid-canvas>
        <div class=header-wrapper>
            <table class=header></table>
        </div>
        <div class=row-wrapper>
          <table class=rows></table>
        </div>
    </div>
</div>

Javascript

$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
    $headerDiv.css({
        left: -$rowDiv[0].scrollLeft + 'px'
    });
});​

CSS

.grid {
  height: 500px;
  width: 350px;
}

.grid-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.header-wrapper {
  position: absolute;
  top: 0;
  width: auto;
  background-color: white;
  z-index: 1;
}

.row-wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: auto;
  padding-top: 18px;
  background-color: lightgreen;
}

th, td {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

​

Problem

Check out the small html structure sample below for context. Check out this fiddle for and example of the problem. Short explanation for fiddle users: - Scroll left - vertical scroll bar not visible - Scroll right - vertical visible - I want the vertical scroll bar always visible - Requirement - The header must remain fixed (visible while scrolling) Long explanation: I have a table with a fixed header and a scrollable body. The complexities of that requires two tables. That's all good. In my cause I also have resizable columns. `table-layout: fixed` for that to work. This is were problems arise. To make the scrolling body work I've got a div that wraps the `.rows` table for scrolling. This works great until the grid, specifically the `.rows` table, overflows in the x direction. In this case the the vertical scroll bar is only visible if the grid is scrolled all the way to the right. Because the scroll bar is on the `.row-wrapper` div. And that overflow is being hidden by the `.grid` div. I'd like the scrollbar to be on the `.grid-canvas` div so that it is visible even when scrolled to the left side. ``` <div class=grid> <div class=grid-canvas> <table class=header></table> <div class=row-wrapper> <table class=rows></table> </div> </div> </div> ``` side note: If you set the table display to block then the wrapping div isn't needed unless you want to support IE8 which I do. Maybe there's a way around that but that another question for another time.

Original source