在顶部和顶部显示滚动条DIV的底部 [英] Displaying scroll bars on Top & Bottom of a DIV

问题描述

我想显示top&底部水平滚动条为 div 。我找到了此SO问题，并相应更改了网页代码。

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 $（。wmd-view-topscroll）
 .scrollLeft（$（。wmd-view）。scrollLeft（））; 
}）; 
}）; 
< / script> 
  

这显示底部滚动条正常，但顶部滚动条被禁用， / p>

提前感谢

---

UPDATE

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

解决方案

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

 < 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>感谢您的回答...这真的帮助我理解内在工作。 ：）
 
I'm trying to display top & bottom horizontal scroll bars for a div. I found this SO question and changed page code accordingly.

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>
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.
解决方案
Finally managed to fix it with this code...

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>
Thanks for the answer given... It really helped me to understand the Inner Working. :)

                        
这篇关于在顶部和顶部显示滚动条DIV的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！