javascript - 如何在当前视口(viewport)中找到表格的边界(终点)？

Question

我的要求是，当表格宽度大于当前视口(viewport)时，必须添加左右两个按钮。当用户单击左侧按钮时，表格必须向左移动，同样向右移动。

所以我决定使用 jQuery 动画方法来完成要求。我的挑战是，我喜欢左边的边界，但不喜欢右边的边界。请提出你的观点和观点

var width = window.innerWidth || document.documentElement.clientWidth|| document.body.clientWidth;

var tableWidth = jQuery("table").width();

var annimwidth = tableWidth - width;

jQuery(".leftButton").on("click", function()){

$("table").animate({
    marginLeft: '-='+annimwidth+'px'
});
if(jQuery("table").css("margin-left")==0){
disable the left button
}
}

同样如何禁用右侧。

右侧边距属性根据表格宽度而变化。所以 margin 属性(property)不是正确的方法。

帮助我如何停止或禁用右键

Answer 1

你不需要寻找边界。每次按下向左或向右箭头时，您只需要做一点 scrollLeft 动画。

像这样:

function scrollH() {
  if (this.className == 'left')
    $('.viewport').animate({
      scrollLeft: "-=" + 50
    }, 150);
  else
    $('.viewport').animate({
      scrollLeft: "+=" + 50
    }, 150);

}

如果元素已经滚动到它的边缘，jQuery 将不会设置任何动画。

我做了一个 fiddle 来展示这个概念。 https://jsfiddle.net/z5vgq3hr/37/

告诉我它是否适合你。