jquery滚动垂直/水平答案

【问题标题】：jquery scrolling vertical/horizontaljquery滚动垂直/水平
【发布时间】：2018-02-08 16:16:49
【问题描述】：

我正在尝试制作一个包含所有由滚动触发的事件的网站。我只需要帮助来达到这个效果：

我有一个网站，其中有几个 div 填充了所有视口，我希望用户能够向下滚动到一个命名的 div，然后当他继续滚动网站时停止垂直滚动，但 div 的内容水平滚动.完成后，网站可以再次垂直滚动。

<body>

<header> </header>

<div class="scroll-vertical" id="tile1"></div>
<div class="scroll-vertical" id="tile2"></div>
<div class="scroll-vertical" id="tile3"></div>

<div class="scroll-horizontal" id="tile4">
    <div class="horizontal" id="tile5"></div>
    <div class="horizontal" id="tile5-a"></div>
    <div class="horizontal" id="tile5-b"></div>
    <div class="horizontal" id="tile5-c"></div>
</div>

<div class="scroll-vertical" id="tile6"></div>
<div class="scroll-vertical" id="tile7"></div>
<footer> </footer>

如何使网站只能从一个 div 滚动到另一个（整页）

我知道有一个名为 fullpage.js 的 jquery 插件做得很好，但作为一个学生使用插件学习 Web 开发并不是提高我技能的最佳方式。

感谢您的帮助！

西蒙干杯

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案1】：

你为什么会这样假设？我怀疑它会比

简单得多

$(document).ready(function() {
    $('#fullpage').fullpage();
});

该插件的作者也很可能已经遇到、考虑并必须解决许多您尚未有机会考虑的跨浏览器和非跨浏览器的细节和问题。

编辑 :: 动画 div：

$( "#bigasshorizontaldiv" ).animate({
    left: "-=thewidthofoneviewport",
    }, 5000, function() {
    // Animation complete.
});

【讨论】：

是的，你当然是完全正确的，但我在这里的目标也是完全理解它是如何工作的，我是 webdevelopement 的新手，并且一直在尝试学习和使用插件来解决我的问题是不是最好的方法。而且 fullpage.js 不是免费和免费的，所以作为学生这是一个问题。
我完全同意。我想让你知道“更简单的方法”是很费力的，以避免错误的预期。
别担心，也许我应该改变它，英语不是我的母语，所以有时我可能不会使用最合适的词。我会改变它，以便更容易理解。
它似乎是免费的，但给你的印象不是？
fullpage.js-master 是免费的，但允许水平和垂直滚动的扩展是 23£。但对我来说，更大的问题是这个扩展解决的问题，而不是主库解决的问题。有一点时间和耐心，我很确定我会成功地制作出这种整页滚动。