如何在顶部和底部的 div 上创建两个滚动条?
我正在制作网页。我需要内容 div 作为候选人列表,将候选人详细信息显示为行列中的所有内容。所以我要求内容上有 Div 顶部滚动条。
最佳答案
从 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>
脚本:
$(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;
}
关于javascript - 如何在div上创建两个滚动条作为顶部和底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22400738/