桌上和底部的水平滚动条
我的页面上有一个非常大的table 。 所以我决定放一个放在桌子底部的水平滚动条。 但是我希望这个滚动条也在桌面上。
我在模板中是这样的：
<div style="overflow:auto; width:100%; height:130%"> <table id="data" style="width:100%">
这只能在HTML和CSS中做到吗？
要模拟元素顶部的第二个水平滚动条，请在具有水平滚动的元素上方放置一个“虚拟” div ，该值足够高于滚动条。 然后附加虚拟元素和真实元素的“滚动”事件的处理程序，以便在移动滚动条时同步其他元素。 虚拟元素将看起来像真实元素上方的第二个水平滚动条。
对于一个现场的例子 ，看到这个小提琴
代码如下：
HTML：
<div class="wrapper1"> <div class="div1"></div> </div> <div class="wrapper2"> <div class="div2"> <!-- Content Here --> </div> </div>
CSS：
.wrapper1, .wrapper2 { width: 300px; overflow-x: scroll; overflow-y:hidden; } .wrapper1 {height: 20px; } .wrapper2 {height: 200px; } .div1 { width:1000px; height: 20px; } .div2 { width:1000px; height: 200px; background-color: #88FF88; overflow: auto; }
JS：
$(function(){ $(".wrapper1").scroll(function(){ $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft()); }); $(".wrapper2").scroll(function(){ $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft()); }); });
尝试使用jquery.doubleScroll 插件
jQuery的：
$(document).ready(function(){ $('#double-scroll').doubleScroll(); });
CSS
#double-scroll{ width: 400px; }
HTML
<div id="double-scroll"> <table id="very-wide-element"> <tbody> <tr> <td></td> </tr> </tbody> </table> </div>
首先伟大的答案@StanleyH如果有人想知道如何使dynamic宽度双滚动容器
CSS
.wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; } .wrapper1 { height: 20px; } .div1 { height: 20px; } .div2 { overflow: none; }
JS
$(function () { $('.wrapper1').on('scroll', function (e) { $('.wrapper2').scrollLeft($('.wrapper1').scrollLeft()); }); $('.wrapper2').on('scroll', function (e) { $('.wrapper1').scrollLeft($('.wrapper2').scrollLeft()); }); }); $(window).on('load', function (e) { $('.div1').width($('table').width()); $('.div2').width($('table').width()); });
HTML
<div class="wrapper1"> <div class="div1"></div> </div> <div class="wrapper2"> <div class="div2"> <table> <tbody> <tr> <td>table cell</td> <td>table cell</td> <!-- ... --> <td>table cell</td> <td>table cell</td> </tr> </tbody> </table> </div> </div>
演示
据我所知，这是不可能的HTML和CSS。
扩展斯坦利的答案，并试图find最低要求，这是我实施的：
JavaScript（从$（document）.ready（））某处调用一次）：
function doubleScroll(){ $(".topScrollVisible").scroll(function(){ $(".tableWrapper") .scrollLeft($(".topScrollVisible").scrollLeft()); }); $(".tableWrapper").scroll(function(){ $(".topScrollVisible") .scrollLeft($(".tableWrapper").scrollLeft()); }); }
HTML（注意宽度会改变滚动条的长度）：
<div class="topScrollVisible" style="overflow-x:scroll"> <div class="topScrollTableLength" style="width:1520px; height:20px"> </div> </div> <div class="tableWrapper" style="overflow:auto; height:100%;"> <table id="myTable" style="width:1470px" class="myTableClass"> ... </table>
而已。
如果您在webkit浏览器或移动浏览器上使用iscroll.js，则可以尝试：
$('#pageWrapper>div:last-child').css('top', "0px");
基于@StanleyH解决scheme，我创build了一个AngularJS指令 ，在jsFiddle上演示。
使用方便：
<div data-double-scroll-bar-horizontal> {{content}} or static content </div>
不需要jQuery。
链接的滚动工作，但在写它的方式创build一个循环，使大多数浏览器的滚动缓慢，如果你点击较轻的滚动条的一部分，并按住（不是当拖动滚动条）。
我用一个标志固定它：
$(function() { x = 1; $(".wrapper1").scroll(function() { if (x == 1) { x = 0; $(".wrapper2") .scrollLeft($(".wrapper1").scrollLeft()); } else { x = 1; } }); $(".wrapper2").scroll(function() { if (x == 1) { x = 0; $(".wrapper1") .scrollLeft($(".wrapper2").scrollLeft()); } else { x = 1; } }); });
没有JQuery（2017）
因为你可能不需要JQuery，所以这是一个基于@StanleyH的Vanilla JS版本。
var wrapper1 = document.getElementById('wrapper1'); var wrapper2 = document.getElementById('wrapper2'); wrapper1.onscroll = function() { wrapper2.scrollLeft = wrapper1.scrollLeft; }; wrapper2.onscroll = function() { wrapper1.scrollLeft = wrapper2.scrollLeft; };
#wrapper1, #wrapper2{width: 300px; border: none 0px RED; overflow-x: scroll; overflow-y:hidden;} #wrapper1{height: 20px; } #wrapper2{height: 100px; } #div1 {width:1000px; height: 20px; } #div2 {width:1000px; height: 100px; background-color: #88FF88; overflow: auto;}
<div id="wrapper1"> <div id="div1"> </div> </div> <div id="wrapper2"> <div id="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>
滚动方向有一个问题：rtl。 看来这个插件不正确的支持它。 这是小提琴：jsfiddle.net/qsn7tupc/3
请注意，它在Chrome中正常工作，但在所有其他stream行浏览器中，顶部滚动条方向仍然保留。
