jQuery - onClick 为 ScrollLeft 设置动画 - 不工作答案

【问题标题】：jQuery - onClick animate ScrollLeft - Not workingjQuery - onClick 为 ScrollLeft 设置动画 - 不工作
【发布时间】：2020-07-22 02:48:17
【问题描述】：

我有一个带有 1 个主容器和 4 个全屏 div 的简单网页，我试图让它们水平滚动。示例我单击 div 1，然后视口移动到 div 2，等等。我已经使用 scrollTop 方法在另一个实例中垂直地进行了这项工作。

我可以手动将页面滚动到其他 div 没有问题，但它在点击时不起作用。附有一个关闭示例的小提琴，您必须使用箭头键滚动（我尚未修复鼠标滚轮滚动问题）。

https://jsfiddle.net/58j2dg3a/36/

这是我用来为 Scroll Left 设置动画的 js 代码。

$(document).ready(function() {

  $("#one").click(function() {
    console.log(this.id);
    $('html, body').animate({
      scrollLeft: $("#two").offset().left
    }, 1000);
  });

});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

scrollLeft 被设置在 html 和 body 元素上，但它应该被设置在 .container 上。

作为建议，您可能想考虑使用 CSS Scroll Snap，它可以让您在没有 JavaScript 的情况下执行此类操作。

【讨论】：

您的解决方案确实有效，但是现在当我单击第二个 div 时，什么也没有发生，当我单击第三个 div 时，它会将我带回第二个。第一个和第四个 div 按预期工作。

【解决方案2】：

正如 Luke Channings 所建议的，我没有使用正确的元素进行滚动。我刚刚完成了实验，我得到了很好的结果。我现在告诉它在哪里移动，而不是告诉 scrollLeft 移动 X 数量的 px。我需要它来响应，所以每次触发该函数时，我都会获取视口宽度并将其乘以 x，这取决于我要显示的 div。

Fiddle 是更新的最终版本。

https://jsfiddle.net/b5g7dhyv/

jQuery 代码

$(document).ready(function(){
  $('#one').on('click', function(){
    let viewportWidth = $(window).width();
    $('#main-wrapper').animate({scrollLeft : viewportWidth}, 1000);
  })
  $('#two').on('click', function(){
    let viewportWidth = $(window).width();
    $('#main-wrapper').animate({scrollLeft : viewportWidth*2}, 1000);
  })
  $('#three').on('click', function(){
    let viewportWidth = $(window).width();
    $('#main-wrapper').animate({scrollLeft : viewportWidth*3}, 1000);
  })
  $('#four').on('click', function(){

    $('#main-wrapper').animate({scrollLeft : 0}, 1000);
  })

});

【讨论】：