javascript - 如何仅在 div 中设置 TOP 水平滚动？

Question

将顶部水平滚动条放在 div 上的最简单方法是什么？

我找到了这个解决方案，但它必须同时具有顶部和底部滚动。我只想要上一个。

表格顶部和底部的水平滚动条

Answer 1

给你...（经许可从@ascii-lime 回答“被盗”:)

该解决方案将与您提供的链接中的解决方案相同，除了溢出：隐藏添加到 .wrapper2 的 CSS 中。

$(function(){
    $(".wrapper1").scroll(function(){
    $(".wrapper2")
        .scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
    $(".wrapper1")
        .scrollLeft($(".wrapper2").scrollLeft());
    });
});

这是更新的CSS：

.wrapper1, .wrapper2{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
.wrapper1{height: 20px; }
.wrapper2{height: 200px; overflow: hidden;}
.div1 {width:1000px; height: 20px; }
.div2 {width:1000px; height: 200px; background-color: #88FF88;
overflow: auto;}

和 HTML：

<div class="wrapper1">
    <div class="div1">
    </div>
</div>
<div class="wrapper2">
    <div class="div2">
    aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb     cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
    </div>
</div>