jQuery ScrollTo 插件 - 水平滚动答案

【问题标题】：jQuery ScrollTo plugin - horizontal scrollingjQuery ScrollTo 插件 - 水平滚动
【发布时间】：2015-06-20 20:49:15
【问题描述】：

我希望这是一个合适的问题在这里发布。这更像是一个理论问题，而不是具体的编码问题。

我正在使用 Ariel Flesler 的 scrollTo plugin 创建一个水平滚动网页。很好，我已经设法从tutorial site 下载了一个工作演示......除了我不明白水平滚动背后的理论。

特别是，我遇到的大多数教程（以及 StackOverflow 上的答案）都建议创建一个似乎充当“视口”的 HTML 包装器元素并在包装器内滚动内容（嵌套标签用于例如）使用 scrollTo 插件。

为什么我不能将一些标签放置在屏幕外（例如，向右 3000 像素）并使用 scrollTo 水平滚动到这些标签？

我试过了，它可以工作，但我无法通过缓动实现平滑滚动（参见下面的代码）。

如果有人能给我一些见解，将不胜感激。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>scrollTo Test</title>

<style>

#box {
   width:100px;
   height:100px;
   background-color:#F00;
   position:relative;
   top:0;
   left:3000px;
}

</style>

</head>

<body>

<nav>
   <a href="#">CLICK</a>
</nav>

<div id="box">BOX</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.scrollTo.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>

<script>

$('nav a').on("click", function () {

    //$.scrollTo( '#box', {top:0 , left:800}, {easing:'easeOutElastic'} );
    $.scrollTo( '#box', 800, {easing:'easeOutElastic', axis:'x'} ); 

});

</script>

</body>
</html>

更新：我在以下位置创建了一个 JSFiddle：http://jsfiddle.net/wzd8202a/

【问题讨论】：

你能提供任何你尝试过的小提琴吗？？
在我看来这是由您的缓动方法引起的。 Using linear 工作得很好。

标签： jquery scrollto

【解决方案1】：

我是 scrollTo 插件的创建者。你应该使用 jsfiddle 之类的东西创建一个演示，然后我可以修复它并分享它。

编辑：那行得通，你指的是它没有正确反弹的事实吗？如果是这样，那是因为窗口和其他元素都不能滚动超出它们的大小。为此，您需要在元素之后留出一个边距。

在您的示例中，我为主体设置了更大的宽度： body { width:4000px; }

Here 是修改后的版本，可以正确弹跳。

如果是这样，请告诉我。

【讨论】：

爱丽儿，非常感谢您的帮助。我看到了我的错误。但是，总的来说，我想知道为什么很多 scrollTo 演示会在父
标签内滚动
标签？为什么不像我在这里所做的那样在浏览器窗口中滚动？
两者都完成了，你可以随心所欲。没有优势取决于您的需求。