Question

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

我正在网页上工作。我已经要求内容div作为候选节目候选人详细信息的列表作为所有行列。所以我在内容上要求Div顶部滚动条。

Answer 1

从SO本身找到了这个答案.. here

以下是答案的fiddle。

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

如何在div上创建两个滚动条作为顶部和底部？

1 个答案: