jQuery ScrollTo 插件 - 水平滚动

Question

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

我正在使用 scrollTo plugin by Ariel Flesler to create a horizontal scrolling webpage. All good, I've managed to download a working demo from a tutorial site ... 除了我不了解水平滚动背后的理论。

特别是，我遇到的大多数教程（以及 Whosebug 上的答案）都建议创建一个 HTML 包装器元素，它似乎充当 'viewport' 并滚动包装器中的内容（例如嵌套标签）使用 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>

更新：我在 http://jsfiddle.net/wzd8202a/

创建了一个 JSFiddle

Answer 1

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

编辑：好吧，你是指它没有正确弹跳的事实吗？如果是这样，那是因为 window 和其他元素都不能滚动到超出它们的大小。为此，您需要在元素后留出空白。

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

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

如果是这样，请告诉我。

jQuery ScrollTo 插件 - 水平滚动

jQuery ScrollTo plugin - horizontal scrolling

jquery

scrollto