HTML元素滚动条定位

Question

我目前正在对网站进行一些改进，并遇到了以下问题。

网站有一个粘性/固定标题，因此只有正文可滚动。

其中一个页面有一个大数据表，扩展到超过1000px的宽度，高度也可能非常高，具体取决于数据的日期选择。

现在我的问题是在包装表的div上启用了滚动，但是你必须一直滚动到底部才能看到滚动条。

我想知道的是，有哪些方法可以将javascript或css的水平滚动条移动到我网站的页脚，因为这个元素始终对用户可见？

实施例：

页脚与表格重叠，因此您必须一直滚动到页面底部才能看到水平滚动条。我想将宽表的水平滚动条移动到我的网站页脚，它始终可见。表格包装和页脚不会相互嵌套。

我目前正在使用的示例代码（HTML）：

<div class="wmd-view-topscroll">
    <div class="scroll-div">
        &nbsp;
    </div>
</div>

<div class="wmd-view">
    <div class="dynamic-div">
<table class="results table table-striped table-bordered table-condensed" style="table-layout: fixed; width:1750px;">
<!-- Contents here -->
</table>
</div>
     </div>
</div>

我目前正在使用的示例代码（jQuery）：

$(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").prependTo($("#siteFooter"));
});

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

上面的代码基本上创建了一个滚动条的克隆，然后我抓住了那个HTML并追加到我的页脚，这有效，但现在我的主表包装上仍然有滚动条。

当您一直滚动到底部时，您会看到2个滚动条。我放在页脚中的那个加上主表封页器中的那个。如果我尝试更改.wmd-view溢出属性，它也会更改页脚中的属性。

非常欢迎任何其他建议。

提前致谢。

Answer 1

尝试为height设置.dynamic-div并提供overflow: auto