javascript - JQuery Double Scroll - 边距/对齐问题

标签 javascript jquery css html scroll

我正在使用 JQuery jqDoubleScroll 插件在 div(包含一个表格)的顶部和底部显示滚动条

在全景 View 中一切看起来都很棒，但是当滚动条出现时它

1) 稍微偏离左侧

2)左右边距不一致(不相等)

我相信这些元素是相关的。我也有一个永久性的 overflow-y:滚动 body 。

这是一支笔 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));

最佳答案

删除表格左侧和右侧的边距 1%，这就是您所说的边距差异的原因，也是滚动条卡在左侧的原因

关于javascript - JQuery Double Scroll - 边距/对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51751949/

上一篇：javascript - 如何在 php 中使用 while 循环在 div 中换行？

下一篇：Jquery 选择不适用于多行链接

相关文章：

jquery - 减少引导时间选择器大小

html - Outlook 2010 字体前景色/背景色 CSS 不能很好地配合

html - 标签旁边垂直居中单选按钮

javascript - 如何在 bitcoinjs-lib 中创建新的 PSBT 交易？

javascript - Kendo ASP.Net MVC Datagrid 如何在子行中获取父行 ID

javascript - ES2015 类变量作用域

javascript - 是否可以通过 ajax 从 php 返回 javascript 函数？

javascript - 将 Doc 属性作为参数传递给 Mongodb 上的函数

javascript - 使用 jQuery 检查 JSON 对象中是否存在键

javascript - 滑动/跟随导航菜单

©2024 IT工具网  联系我们