好吧，我正在使用JQuery jqDoubleScroll插件在div（其中包含表格）的顶部和底部显示滚动条
所有内容在全视图下看起来都很不错，但是当滚动条出现时
1）稍微挂在左侧
2）左右边距不一致（不相等）
我相信这些项目是相关的。我也有一个永久的溢出-y：滚动离开身体。
这是一支笔 https://codepen.io/rblanc/pen/jpQbBv
HTML
<h1>Recompute on window resize</h1>
<p>Adds the scrollbar only if the bottom one is present, and recompute the top scrollbar size each time the window is resized.</p>
<p>Resize the window to try!!!!</p>
<div id="sample2">
<table>
<tr>
<th>AAAAAAAAA</th>
<th>BBBBBBBBB</th>
<th>CCCCCCCCC</th>
<th>DDDDDDDDD</th>
<th>EEEEEEEEE</th>
<th>FFFFFFFFF</th>
<th>GGGGGGGGG</th>
<th>HHHHHHHHH</th>
<th> IIIIIIIII</th>
<th>JJJJJJJJJ</th>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
<tr>
<td>AAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCC</td>
<td>DDDDDDDDD</td>
<td>EEEEEEEEE</td>
<td>FFFFFFFFF</td>
<td>GGGGGGGGG</td>
<td>HHHHHHHHH</td>
<td>IIIIIIIII</td>
<td>JJJJJJJJJ</td>
</tr>
</table>
</div>
CSS
html {
height: 100%;
overflow-y: scroll; /**/
}
body {
padding: 0;
background: #ccc;
}
#sample2 {
width: 100%;
margin-bottom: 40px;
}
h1 {
font-family: Calibri;
color: #000;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
h3 {
font-family: Calibri;
color: #000;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 15.4px;
}
p {
font-family: Calibri;
color: #000;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
a {
color: #ffffff;
}
table {
font-family: Calibri;
color: #000;
border-collapse: collapse; /**/
border-spacing: 0;
width: 98%; /**/
height: 100%;
margin: 0 1%; /**/
padding: 0px;
display: table; /**/
border-spacing: 2px; /**/
border-color: grey; /**/
}
tr:nth-child(odd) td {}
tr:nth-child(even) td {
background-color: rgba(255, 255, 255, 0.2);
}
table td,
table th {
vertical-align: middle;
text-align: left;
padding: 12px;
font-size: 14px;
font-family: Calibri;
color: #000;
}
table tr th {
background-color: #06A50C; !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
text-align: left;
font-size: 14px;
font-family: Calibri;
font-weight: bold;
}
/* customize scroll */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.5);
}
JQUERY
$(document).ready(function() {
$('#sample2').doubleScroll({
resetOnWindowResize: true
});
});
(function( $ ) {
jQuery.fn.doubleScroll = function(userOptions) {
// Default options
var options = {
contentElement: undefined, // Widest element, if not specified first child element will be used
scrollCss: {
'overflow-x': 'auto',
'overflow-y': 'hidden'
},
contentCss: {
'overflow-x': 'auto',
'overflow-y': 'hidden'
},
onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
};
$.extend(true, options, userOptions);
// do not modify
// internal stuff
$.extend(options, {
topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>',
topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
topScrollBarInnerSelector: '.doubleScroll-scroll'
});
var _showScrollBar = function($self, options) {
if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
// content doesn't scroll
// remove any existing occurrence...
$self.prev(options.topScrollBarWrapperSelector).remove();
return;
}
// add div that will act as an upper scroll only if not already added to the DOM
var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
if ($topScrollBar.length == 0) {
// creating the scrollbar
// added before in the DOM
$topScrollBar = $(options.topScrollBarMarkup);
$self.before($topScrollBar);
// apply the css
$topScrollBar.css(options.scrollCss);
$self.css(options.contentCss);
// bind upper scroll to bottom scroll
$topScrollBar.bind('scroll.doubleScroll', function() {
$self.scrollLeft($topScrollBar.scrollLeft());
});
// bind bottom scroll to upper scroll
var selfScrollHandler = function() {
$topScrollBar.scrollLeft($self.scrollLeft());
};
$self.bind('scroll.doubleScroll', selfScrollHandler);
}
// find the content element (should be the widest one)
var $contentElement;
if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
$contentElement = $self.find(options.contentElement);
} else {
$contentElement = $self.find('>:first-child');
}
// set the width of the wrappers
$(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
$topScrollBar.width($self.width());
$topScrollBar.scrollLeft($self.scrollLeft());
}
return this.each(function() {
var $self = $(this);
_showScrollBar($self, options);
// bind the resize handler
// do it once
if (options.resetOnWindowResize) {
var id;
var handler = function(e) {
_showScrollBar($self, options);
};
$(window).bind('resize.doubleScroll', function() {
// adding/removing/replacing the scrollbar might resize the window
// so the resizing flag will avoid the infinite loop here...
clearTimeout(id);
id = setTimeout(handler, options.timeToWaitForResize);
});
}
});
}
}（jQuery））;
答案 0 :(得分：0)
删除表格左右两侧的边距1％，这就是您所说的边距差异的原因，也是滚动条向左悬挂的原因