how to create two scroll bar on div as top and bottom?

Question

How would I create two scroll bars on div at top and bottom ?

I am working on web page. I have require content div as listing of candidate show candidate detail as all in rows columns. So I have require Div top scrolling bar on content.

Answer 1

Found this answer from SO itself : here.

Here is the fiddle of the answer.

HTML:

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

SCRIPT:

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

CSS:

.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;
}