How to Get Horizontal Scrollbars at Top and Bottom of a Div

horizontal scrollbar on top and bottom of table

To simulate a second horizontal scrollbar on top of an element, put a "dummy" div above the element that has horizontal scrolling, just high enough for a scrollbar. Then attach handlers of the "scroll" event for the dummy element and the real element, to get the other element in synch when either scrollbar is moved. The dummy element will look like a second horizontal scrollbar above the real element.

For a live example, see this fiddle

Here's the code:

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>

CSS:

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}

JS:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

How can I get horizontal scrollbars at top and bottom of a div?

You could create a new dummy element above the real one, with the same amount of content width to get an extra scrollbar, then tie the scrollbars together with onscroll events.

function DoubleScroll(element) {    var scrollbar = document.createElement('div');    scrollbar.appendChild(document.createElement('div'));    scrollbar.style.overflow = 'auto';    scrollbar.style.overflowY = 'hidden';    scrollbar.firstChild.style.width = element.scrollWidth+'px';    scrollbar.firstChild.style.paddingTop = '1px';    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));    scrollbar.onscroll = function() {        element.scrollLeft = scrollbar.scrollLeft;    };    element.onscroll = function() {        scrollbar.scrollLeft = element.scrollLeft;    };    element.parentNode.insertBefore(scrollbar, element);}
DoubleScroll(document.getElementById('doublescroll'));

#doublescroll{  overflow: auto; overflow-y: hidden; }#doublescroll p{  margin: 0;   padding: 1em;   white-space: nowrap; }

<div id="doublescroll">    <p>        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut        enim ad minim veniam, quis nostrud exercitation ullamco laboris        nisi ut aliquip ex ea commodo consequat.    </p></div>

HTML div overflow horizontal scroll at the top of div without jquery

Try this Fiddle, it has scroll bars in top, This is based on How can I get horizontal scrollbars at top and bottom of a div?

Displaying scroll bars on Top & Bottom of a DIV

Finally managed to fix it with this code...

HTML

<div class="wmd-view-topscroll">
    <div class="scroll-div">
         
    </div>
</div>
<div class="wmd-view">
    <div class="dynamic-div">
        @Html.Markdown(Model.Contents)
    </div>
</div>

CSS

.wmd-view-topscroll, .wmd-view
{
    overflow-x: auto;
    overflow-y: hidden;
    width: 1000px;
}

.wmd-view-topscroll
{
    height: 16px;
}

.dynamic-div
{
    display: inline-block;
}

Javascript/JQuery

<script type="text/javascript">
    $(function () {

        $(".wmd-view-topscroll").scroll(function () {
            $(".wmd-view")
            .scrollLeft($(".wmd-view-topscroll").scrollLeft());
        });

        $(".wmd-view").scroll(function () {
            $(".wmd-view-topscroll")
            .scrollLeft($(".wmd-view").scrollLeft());
        });

    });

    $(window).load(function () {
        $('.scroll-div').css('width', $('.dynamic-div').outerWidth() );
    });
</script>

Thanks for the answer given... It really helped me to understand the Inner Working. :)

How to make middle nested div scroll and top and bottom nested div maintain position fixed?

You can make the middle container horizontal scroll working by adding white-space: nowrap; to the .middle-inner-container class.

the css looks like so:

.outer-container {
    height: 470px;
    position: relative;
    width: 100%;
    .top-inner-container {
        width: 100%;
        height: 70px;
    }
    .middle-inner-container {
        white-space: nowrap;
        background-color: grey;
        overflow-x: scroll;
        height: 340px;
        .block {
            display: inline-block;
            vertical-align: top;
        }
    }
    .bottom-inner-container {
        // background-color: #fff;
        width: 100%;
        top: 404px;
        left: 0px;
    }
}

remember to add the class block to each subsection in the middle div.

How to insert horizontal scroll bar at the top above listview

By default, the browser will only display the scroll bars on the bottom and right side of the area that needs scrolling. In order to get the scroll bars on the top or the left, you'd have to create something that essentially mimics the opposite scroll bar.

There is a great explanation and example of how to do this here:
horizontal scrollbar on top and bottom of table

There are also jQuery plugins as mentioned in the above post that do the same:
https://github.com/sniku/jQuery-doubleScroll

Have a horizontal scrollbar on the top and bottom of a v-data-table (Vuetify)

Technically, a div cannot have more than one scrollbar on the same direction.

What we can do is create a second element, with dummy content of the same size as the content of the element we want to scroll, and then link the scrolling functions between the two elements. Simply put, when we scroll one, we also scroll the other.

Here's a vanilla implementation, demonstrating the principle:

window.addEventListener("DOMContentLoaded", () => {
  const updateScrollers = () => {
    dummy.style.width = _b.scrollWidth + "px";
  };
  updateScrollers();
  window.addEventListener("resize", updateScrollers);

  const linkScroller = (a, b) => {
    a.addEventListener("scroll", (e) => {
      b.scrollLeft = e.target.scrollLeft;
    });
  };
  [
    [_a, _b],
    [_b, _a],
  ].forEach((args) => linkScroller(...args));
});

#_a,
#_b {
  overflow-x: auto;
}

.content {
  height: 100px;
  width: 200vw;
}
#_a > div {
  height: 1px;
}
#_b .content {
  background: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 50px,
    #f5f5f5 50px,
    #f5f5f5 80px
  );
}

<div id="_a">
  <div id="dummy"></div>
</div>
<div id="_b">
  <div class="content"></div>
</div>

---

Related Topics