如何在div的顶部和底部创建两个滚动条?
我正在网页上。我要求content div作为所有行列中的候选者显示候选者详细信息的列表。所以我需要在内容上使用Div顶部滚动条。
从SO本身找到这个答案:在这里。
这是答案的小提琴。
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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句