Question

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

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

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

为什么我不能在屏幕外放置一些标签（例如，向右移动3000px）并使用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的东西创建一个这样的演示，然后我可以修复它并分享它。

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

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

Here是经过正确退回的修改后的版本。

如果是这样，请告诉我。

jQuery ScrollTo插件 - 水平滚动

1 个答案: