如何在div上创建两个滚动条作为顶部和底部? [英] how to create two scroll bar on div as top and bottom?

问题描述

如何在div的顶部和底部创建两个滚动条?

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

我正在网页上.我要求content div作为所有行列中的候选显示候选者详细信息的列表.因此，我需要在内容上使用Div顶部滚动条.

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.

推荐答案

从SO本身找到了以下答案:

Found this answer from SO itself : here.

这是答案的小提琴.

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>

脚本:

$(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;
}

这篇关于如何在div上创建两个滚动条作为顶部和底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！