计算表格滚动条位置的问题答案

【问题标题】：Issue calculating table scrollbar location计算表格滚动条位置的问题
【发布时间】：2017-03-27 01:56:17
【问题描述】：

所以我有一个脚本，可以根据滚动条的位置在表格边缘添加轻微的阴影，您可以在其中滚动，但它有时不起作用。

这是其中的一部分：

  $('table').on('scrollstart scrollstop', function(){
    if($(this).parent().hasClass('table-wrap')){
      var elem = $(this),
        elemBody = elem.find('tbody'),
        elemParent = elem.parent('.table-wrap');
      var scrolled = (elemBody.outerWidth() - elemParent.outerWidth() - elem.scrollLeft());
      if(scrolled === 0){
        elemParent.addClass('left_active');
        elemParent.removeClass('right_active');
      } else if(elem.scrollLeft() === 0) {
        elemParent.removeClass('left_active');
        elemParent.addClass('right_active');
      } else {
        elemParent.addClass('left_active');
        elemParent.addClass('right_active');
      }
    }
  });

这部分有时我必须在“elem.scrollLeft() --here---); 中添加“+1”才能使其工作。

var scrolled = (elemBody.outerWidth() - elemParent.outerWidth() - elem.scrollLeft());

但后来我注意到，有些表有帮助，而在另一些表上，它停止工作。这意味着当我向右滚动时，“right_active”类不会消失。

有什么建议吗？

【问题讨论】：

你能提供一个 jsfiddle 吗？

标签： javascript jquery css html-table

【解决方案1】：

您是否尝试在 var scrolled 的计算中包含滚动条宽度？

var scrolled = (elemBody.outerWidth() - elemParent.outerWidth() - elem.scrollLeft());

我认为您在正确的轨道上，但宽度可能不准确，因为.outerWidth() 不包括滚动条宽度。因此，最大滚动宽度总是大于实际元素宽度。

【讨论】：