我正试着展示顶级&底部水平滚动条为div.我找到了
this SO question并相应地更改了页面代码.
HTML /剃刀
<div class="wmd-view-topscroll">
<div class="scroll-div">
</div>
</div>
<div class="wmd-view">
@Html.Markdown(Model.Contents)
</div>
CSS
.wmd-view-topscroll,.wmd-view
{
overflow-x: scroll;
overflow-y: hidden;
width: 1000px;
}
.scroll-div
{
width: 1000px;
}
使用Javascript
<script type="text/javascript">
$(function(){
$(".wmd-view-topscroll").scroll(function(){
$(".wmd-view")
.scrollLeft($(".wmd-view-topscroll").scrollLeft());
});
$(".wmd-view").scroll(function(){
$(".wmd-view-topscroll")
.scrollLeft($(".wmd-view").scrollLeft());
});
});
</script>
这会正常显示底部滚动条但顶部滚动条已禁用,我在这里缺少什么？
提前致谢
UPDATE
解决方法
您可以通过HTML和CSS中的一些调整来实现,如下所示;
HTML应如下所示：
<div class="wmd-view-topscroll">
<div class="scroll-div1">
</div>
</div>
<div class="wmd-view">
<div class="scroll-div2">
@Html.Markdown(Model.Contents)
</div>
</div>
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;
}
