Question

What is the easiest way to put a top horizontal scroll on a div?

I found this solution but it must have both top and bottom scroll. I just want the top one.

horizontal scrollbar on top and bottom of table

Answer 1

Here you go… (answer “stolen” from @ascii-lime with permission 🙂

The solution would be identical to the one in the link you provided, except with overflow: hidden added to the CSS for .wrapper2.

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

Here’s the updated css:

.wrapper1, .wrapper2{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
.wrapper1{height: 20px; }
.wrapper2{height: 200px; overflow: hidden;}
.div1 {width:1000px; height: 20px; }
.div2 {width:1000px; height: 200px; background-color: #88FF88;
overflow: auto;}

And the HTML:

<div class="wrapper1">
    <div class="div1">
    </div>
</div>
<div class="wrapper2">
    <div class="div2">
    aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb     cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
    </div>
</div>