Displaying scroll bars on Top & Bottom of a DIV

Question

I'm trying to display top & bottom horizontal scroll bars for a div. I found this SO question and changed page code accordingly.

HTML/Razor

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

CSS

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

.scroll-div
{
    width: 1000px;
}

Javascript

<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());
    });
});
</script>

This displays bottom scrollbar as normal but the top scroll bar is disabled, what am I missing here?

Thanks in advance

UPDATE

Even when I remove the javascript, output is same. Seems Java Script code is not executing, but no javascript errors listed.

score 12 · Answer 1 · answered Aug 01 '12 at 08:35

12

You can achieve by some tweaks in your HTML and CSS as given below;

HTML Should look like this:

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

CSS Should look like this:

wmd-view-topscroll, .wmd-view {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 300px;
    border: none 0px RED;
}

.wmd-view-topscroll { height: 20px; }
.wmd-view { height: 200px; }
.scroll-div1 { 
    width: 1000px; 
    overflow-x: scroll;
    overflow-y: hidden;
}

.scroll-div2 { 
    width: 1000px; 
    height:20px;
}

SEE DEMO

answered Aug 01 '12 at 08:35

Ahsan Khurshid

9,383
1
33
51

Sorry... This didn't work in my project (same results). May be something wrong in my page structure... :( – Nalaka526 Aug 01 '12 at 15:20
@Nalaka526: Use the same css and html given in my answer. – Ahsan Khurshid Aug 02 '12 at 04:05
Greetings, can you do this with a 'fluid' width ? – Milche Patern Jul 08 '14 at 15:21
@A.K Do you know why the scroll barely inches along when you click on the 'blank space' area of the scrollbar? Most scrollbars I see on pages move a lot more than the one implemented here (and in my own code) – Alex Petralia Jun 21 '17 at 16:27

score 5 · Accepted Answer · answered Aug 03 '12 at 05:32

Finally managed to fix it with this code...

HTML

<div class="wmd-view-topscroll">
    <div class="scroll-div">
        &nbsp;
    </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. :)

This worked perfectly after I changed the width to 100% instead of 1000px, as I needed a responsive version. Thanks. — vr_driver, Jan 18 '23 at 03:08

Displaying scroll bars on Top & Bottom of a DIV

2 Answers2

Linked