在 DIV 的顶部和底部显示滚动条答案

【问题标题】：Displaying scroll bars on Top & Bottom of a DIV在 DIV 的顶部和底部显示滚动条
【发布时间】：2012-07-30 02:00:28
【问题描述】：

我正在尝试为 div 显示顶部和底部水平滚动条。我找到了this SO question 并相应地更改了页面代码。

HTML/Razor

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

这显示底部滚动条正常，但顶部滚动条被禁用，我在这里缺少什么？

提前致谢

更新

即使我删除了 javascript，输出也是一样的。似乎 Java Script 代码没有执行，但没有列出任何 javascript 错误。

【问题讨论】：

标签： javascript css html scrollbar

【解决方案1】：

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

【讨论】：

对不起...这在我的项目中不起作用（结果相同）。我的页面结构可能有问题... :(
@Nalaka526：使用我的答案中给出的相同 css 和 html。
你好，你能用“流体”宽度来做这个吗？
@A.K 你知道为什么当你点击滚动条的“空白”区域时滚动几乎没有几英寸吗？我在页面上看到的大多数滚动条都比这里实现的滚动条（以及我自己的代码）移动得更多

【解决方案2】：

终于用这段代码修复了它...

HTML

<div class="wmd-view-topscroll">
    <div class="scroll-div">
        &nbsp;
    </div>
</div>
<div class="wmd-view">
    <div class="dynamic-div">
        @Html.Markdown(Model.Contents)
    </div>
</div>

CSS

.wmd-view-topscroll, .wmd-view
{
    overflow-x: auto;
    overflow-y: hidden;
    width: 1000px;
}

.wmd-view-topscroll
{
    height: 16px;
}

.dynamic-div
{
    display: inline-block;
}

Javascript/JQuery

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

    });

    $(window).load(function () {
        $('.scroll-div').css('width', $('.dynamic-div').outerWidth() );
    });
</script>

感谢您的回答...它确实帮助我理解了内部工作。 :)

【讨论】：