水平滚动到锚点并阻止 y 轴

【问题标题】：scroll horizontally to anchors and block y-axis水平滚动到锚点并阻止 y 轴
【发布时间】：2015-02-27 17:16:27
【问题描述】：

我有一个位置：固定箭头导航，可让您通过 jquery 和水平定位的锚点向左或向右滚动几列：

        $('html,body').animate({
        scrollLeft: $(target).offset().left
        }, 800 , function (){window.location.hash = target;});

到目前为止效果很好。

列很窄，它们可能会变得很长，迫使用户向下滚动。一旦你向下滚动并想要跳转到另一列，js 会继续幻灯片动画，然后跳转到下一列的顶部。

有没有办法阻止运动的 y 轴？还是告诉脚本只进行水平移动？

提前致谢！

【问题讨论】：

【解决方案1】：

问题在于，在您完成动画后，您将散列设置为目标。这将强制浏览器跳转到具有哈希 id 的元素。您实际上不想要这种行为，因为您只想要 y 轴。

可能会在元素末尾附加一个字符串，以便您仍然可以定位它，但不是您设置的哈希标签。

 scrollLeft: $(target + "_real").offset().left
        }, 800 , function (){window.location.hash = target;});

【讨论】：

感谢您的提示。 =) 有时只需要很少的时间就可以看出它必须如何工作。将散列设置为目标的函数实际上是多余的。 scrollLeft 获取目标并向其移动。由于它是“scrollLeft”，它已经水平移动而不是垂直移动。 $('html,body').animate({ scrollLeft: $(target).offset().left }, 800 );