Javascript 表格顶部和底部的水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3934271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
horizontal scrollbar on top and bottom of table
提问by psoares
I've a very large tableon my page. So I decided to put a horizontal scrollbar on the bottom of the table. But I would like this scrollbar to be also on top on the table.
table我的页面上有一个很大的。所以我决定在表格底部放一个水平滚动条。但我希望这个滚动条也位于桌子的顶部。
What I have in the template is this:
我在模板中的内容是这样的：
<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">...</table>
</div>
Is this possible to do in HTML and CSS only?
这只能在 HTML 和 CSS 中实现吗？
回答by StanleyH
To simulate a second horizontal scrollbar on top of an element, put a "dummy" divabove the element that has horizontal scrolling, just high enough for a scrollbar. Then attach handlers of the "scroll" event for the dummy element and the real element, to get the other element in synch when either scrollbar is moved. The dummy element will look like a second horizontal scrollbar above the real element.
要模拟元素顶部的第二个水平滚动条，请在div具有水平滚动的元素上方放置一个“虚拟” ，刚好足以容纳滚动条。然后为虚拟元素和真实元素附加“滚动”事件的处理程序，以便在移动任一滚动条时使另一个元素同步。虚拟元素看起来像真实元素上方的第二个水平滚动条。
For a live example, see this fiddle
有关现场示例，请参阅此小提琴
Here's the code:
这是代码：
HTML:
HTML：
<div class="wrapper1">
<div class="div1"></div>
</div>
<div class="wrapper2">
<div class="div2">
<!-- Content Here -->
</div>
</div>
CSS:
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:
JS：
$(function(){
$(".wrapper1").scroll(function(){
$(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
$(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
});
});
回答by pawel.suwala
Try using the jquery.doubleScrollplugin:
jQuery :
jQuery ：
$(document).ready(function(){
$('#double-scroll').doubleScroll();
});
CSS :
CSS :
#double-scroll{
width: 400px;
}
HTML :
HTML :
<div id="double-scroll">
<table id="very-wide-element">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
回答by simo
First of all, great answer, @StanleyH. If someone is wondering how to make the double scroll container with dynamic width :
首先，很好的答案，@StanleyH。如果有人想知道如何制作具有动态宽度的双滚动容器：
css
css
.wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; }
.wrapper1 { height: 20px; }
.div1 { height: 20px; }
.div2 { overflow: none; }
js
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
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>
demo
演示
回答by rap-2-h
Without JQuery (2017)
没有 JQuery (2017)
Because you might not need JQuery, here is a working Vanilla JS version based on @StanleyH answer:
因为您可能不需要 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>回答by avianey
You can use a jQuery plugin that will do the job for you :
您可以使用 jQuery 插件来为您完成这项工作：
The plugin will handle all the logic for you.
该插件将为您处理所有逻辑。
回答by HoldOffHunger
StanleyH's answer was excellent, but it had one unfortunate bug: clicking the shaded area of the scrollbar no longer jumps to the selection you click. Instead, what you get is a very small and somewhat annoying increment in the position of the scrollbar.
StanleyH 的回答非常好，但它有一个不幸的错误：单击滚动条的阴影区域不再跳转到您单击的选择。相反，您得到的是滚动条位置的一个非常小且有点烦人的增量。
Tested: 4 versions of Firefox (100% affected), 4 versions of Chrome (50% affected).
测试：4 个版本的 Firefox（100% 受影响），4 个版本的 Chrome（50% 受影响）。
Here's my jsfiddle. You can get around this with by having an on/off (true/false) var that allows only one onScroll() event to trigger at a time:
这是我的jsfiddle。您可以通过设置一个 on/off (true/false) 变量来解决这个问题，该变量一次只允许触发一个 onScroll() 事件：
var scrolling = false;
$(".wrapper1").scroll(function(){
if(scrolling) {
scrolling = false;
return true;
}
scrolling = true;
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
if(scrolling) {
scrolling = false;
return true;
}
scrolling = true;
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
Problem Behavior With Accepted Answer :
接受答案的问题行为：
Actually Desired Behavior :
实际期望的行为：
So, just why does this happen?If you run through the code, you'll see that wrapper1 calls wrapper2's scrollLeft, and wrapper2 calls wrapper1's scrollLeft, and repeat this infinitely, so, we have an infinite loop problem. Or, rather: the continued scrolling of the user conflicts with wrapperx's call of the scrolling, an event conflict occurs, and the end result is no jumping in the scrollbars.
那么，为什么会发生这种情况呢？如果你运行代码，你会看到wrapper1调用了wrapper2的scrollLeft，而wrapper2调用了wrapper1的scrollLeft，并且无限重复，所以，我们有一个无限循环问题。或者，更确切地说：用户的继续滚动与wrapperx 的滚动调用发生冲突，发生事件冲突，最终结果是滚动条中没有跳转。
Hope this helps someone else out!
希望这可以帮助别人！
回答by Ahmed Aboud
a javascript only solution that's based on @HoldOffHunger and @bobince answers
基于@HoldOffHunger 和@bobince 答案的仅 javascript 解决方案
<div id="doublescroll">
.
.
function DoubleScroll(element) {
var scrollbar= document.createElement('div');
scrollbar.appendChild(document.createElement('div'));
scrollbar.style.overflow= 'auto';
scrollbar.style.overflowY= 'hidden';
scrollbar.firstChild.style.width= element.scrollWidth+'px';
scrollbar.firstChild.style.paddingTop= '1px';
scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
var running = false;
scrollbar.onscroll= function() {
if(running) {
running = false;
return;
}
running = true;
element.scrollLeft= scrollbar.scrollLeft;
};
element.onscroll= function() {
if(running) {
running = false;
return;
}
running = true;
scrollbar.scrollLeft= element.scrollLeft;
};
element.parentNode.insertBefore(scrollbar, element);
}
DoubleScroll(document.getElementById('doublescroll'));
回答by przno
Based on @StanleyH solution I created an AngularJS directive, demo on jsFiddle.
基于@StanleyH解决方案，我创建了一个AngularJS指令，演示上的jsfiddle。
Easy to use:
便于使用：
<div data-double-scroll-bar-horizontal> {{content}} or static content </div>
For AngularJS developers
对于 AngularJS 开发人员
回答by Yossi Vainshtein
Linking the scrollers worked, but in the way it's written it creates a loop which makes scrolling slow in most browsers if you click on the part of the lighter scrollbar and hold it (not when dragging the scroller).
链接滚动条是有效的，但按照它的编写方式，它会创建一个循环，如果您单击较轻的滚动条的一部分并按住它（而不是拖动滚动条时），它会在大多数浏览器中使滚动速度变慢。
I fixed it with a flag:
我用标志固定它：
$(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;
}
});
});
回答by punkrockbuddyholly
As far as I'm aware this isn't possible with HTML and CSS.
据我所知，这在 HTML 和 CSS 中是不可能的。
