javascript – 在DIV的顶部和底部显示滚动条

我正试着展示顶级&底部水平滚动条为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

即使我删除了javascript,输出也是一样的.似乎Java脚本代码没有执行,但没有列出javascript错误.

解决方法

您可以通过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;
}

SEE DEMO

原文链接：https://www.f2er.com/js/158133.html

javascript – 在DIV的顶部和底部显示滚动条

解决方法

猜你在找的JavaScript相关文章