javascript - 问题计算表滚动条位置

Question

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

这是其中的一部分:

  $('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');
      }
    }
  });

这部分有时我必须将“+1”添加到“elem.scrollLeft() --here---); 以使其工作。

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

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

有什么建议吗？

Answer 1

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

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

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