Javascript 如何在div上创建两个滚动条，即顶部和底部？

如何在div的顶部和底部创建两个滚动条

---

我正在网页上工作。我需要contentdiv作为候选者列表，将候选者详细信息显示为所有行和列。因此，我需要内容上的Div-top滚动条。

从So本身找到了这个答案：

以下是答案的答案

HTML:

CSS:

---

您的意思是，对于单个DIV，您希望在顶部和底部都有水平滚动条吗？问题和标题也不清楚。：）编辑：现在很清楚：）答案可以在这个问题中找到：我正在以表格格式创建列表页面。我需要在顶部滚动条上将页面列为水平滚动条，并列出底部水平滚动条..wmd view topscroll scroll（）调用.wmd view scroll（），然后.wmd view scroll（）调用.wmd view topscroll scroll（），然后.wmd view topscroll scroll（）再次调用.wmd-viewscroll（），然后，这不是一个无限循环吗？@holdoffuinge我不知道如何，scrollLeft（）根据jquery文档获取或设置元素的水平位置嘿，chris c：我写了一篇关于无限循环的评论。你可能是想问海报上的问题，AJ？我没有说任何关于scrollLeft（）的事。@chris c:哦，顺便说一句，你有没有检查过这会创建一个无限循环？检查它，它会导致真正的错误行为，在这里的答案中添加了一个视频gif，对如何做到这一点给出了完整的解释：--从2010年开始，在这个问题之前的4年，更受欢迎，并且有更多的人观看（即更好的质量）。只是一个提示@Holdoff对这个bug做得很好，我更新了代码。但实际上，它不是一个无限循环，因为一旦滚动停止，它就会结束。而且，当滚动一个元素时，它只调整两个元素的滚动位置。干杯：）

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

$(function(){
    $(".wmd-view-topscroll").scroll(function(){
        $(".wmd-view")
            .scrollLeft($(".wmd-view-topscroll").scrollLeft());
    });
    $(".wmd-view").scroll(function(){
        $(".wmd-view-topscroll")
            .scrollLeft($(".wmd-view").scrollLeft());
    });
});

.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;
}