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

Displaying scroll bars on Top & Bottom of a DIV

提问by Nalaka526

I'm trying to display top & bottom horizontal scroll bars for a div. I found this SO questionand changed page code accordingly.

我正在尝试为div. 我发现了这个 SO question并相应地更改了页面代码。

HTML/Razor

HTML/剃刀

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

CSS

CSS

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

.scroll-div
{
    width: 1000px;
}

Javascript

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>

This displays bottom scrollbar as normal but the top scroll bar is disabled, what am I missing here?

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

Thanks in advance

提前致谢

---

---

UPDATE

更新

Even when I remove the javascript, output is same. Seems Java Script code is not executing, but no javascript errors listed.

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

采纳答案by Nalaka526

Finally managed to fix it with this code...

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

HTML

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

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

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>

Thanks for the answer given... It really helped me to understand the Inner Working. :)

感谢给出的答案......它真的帮助我理解了内部工作。:)

回答by Ahsan Khurshid

You can achieve by some tweaks in your HTML and CSS as given below;

您可以通过对 HTML 和 CSS 进行一些调整来实现，如下所示；

HTML Should look like this:

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 Should look like this:

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

看演示