我想在网格的两侧使用滚动条或在鼠标移动时滚动网格。
我试过下面的代码,但底部滚动条有效,但顶部滚动条无效。
<script >
$(function () {
$(".wrapper1").scroll(function () {
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function () {
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
});
$(window).load(function () {
$('.div1').css('width', $('.div2').outerWidth());
});
</script>
这是div的css
<style type="text/css">
.wrapper1, .wrapper2 {
width: 900px;
border: none 0px RED;
overflow-x: scroll;
overflow-y: hidden;
}
.wrapper1 {
height: 20px;
}
/*.wrapper2 {
height: 200px;
}*/
.div1 {
width: 1000px;
height: 20px;
}
.div2 {
width: 1000px;
background-color: #88FF88;
overflow: auto;
}
</style>
这是html
<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div id="div2">
<%-- my grid-- %>
</div>
</div>
这是我的结果
但是顶部侧边栏不起作用
当我在浏览器控制台中粘贴相同的 jQuery 函数并输入时,两个 slider 都可以正常工作
最佳答案
小观察:div2 的 css 应该是 id 选择器(#)。
#div2 {
width: 1000px;
background-color: #88FF88;
overflow: auto;
}
关于jquery - 在网格顶部和底部显示滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39763142/