jQuery滚动垂直/水平

Question

I'm trying to make an entire website with all events triggered by scrolling. 我正在尝试制作一个包含滚动触发的所有事件的整个网站。 I just need help to achieve this effect : 我只需要帮助即可达到此效果：

I have a website with a few divs which fill all the viewport, I want the user to be able to scroll down to a named div and then when he keep scrolling the website stop scrolling vertically but the content of the div scroll horizontally. 我有一个带有几个div且填充了所有视口的网站，我希望用户能够向下滚动到一个命名的div，然后当他继续滚动网站时停止垂直滚动，但div的内容水平滚动。 when it's done the website can scroll vertically again. 完成后，网站可以再次垂直滚动。

<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>

How to make that the website can only be scrolled from one div to the other ( full page) 如何使网站只能从一个div滚动到另一个div（整页）

I know there is a jquery plugin named fullpage.js which does that pretty well but as a student learning web development using plugins is not the best way to improve my skills. 我知道有一个名为fullpage.js的jquery插件可以很好地完成此工作，但是作为一个学生学习使用插件的Web开发并不是提高我的技能的最佳方法。

Thanks for your help! 谢谢你的帮助！

Cheers Simon 干杯西蒙

Answer 1

Why would you assume that ? 你为什么会假设呢？ I doubt it can get much simpler than 我怀疑它会比简单得多

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

The author of the plugin also most likely already encountered, considered and had to solve a number of details and issues, cross-browser and non, that you have not yet had a chance to think about. 该插件的作者很可能已经遇到，考虑并必须解决许多细节和问题，跨浏览器和非浏览器，您还没有机会考虑这些问题。

Edit :: animating divs: 编辑::动画div：

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

jQuery滚动垂直/水平

问题描述

1 个解决方案

解决方案1
0 2017-08-30 20:53:47

jQuery滚动垂直/水平

问题描述

1 个解决方案

解决方案1 0 2017-08-30 20:53:47

解决方案1
0 2017-08-30 20:53:47