在滚动条上滚动100vh部分

这是一个普遍问题，但我试图找到一些代码示例以及用于此类行为的术语以及如何实现它。在滚动条上滚动100vh部分

实施例：https://pixelheads.nl/

每一部分都充分滚动到视图上滚动。

来源

2017-03-05 Snorlax

不知道它叫什么。 “单页/一页滚动”也许？ fullpage.js是一个库，它会这样做http://alvarotrigo.com/fullPage –

谢谢，可以用指定的部分完成，当我尝试自己的，它不适用于其他部分，例如：https： //jsfiddle.net/jzhang172/7b2w82x2/ – Snorlax

@Snorlax所有部分必须与[文档中所述（https://github.com/alvarotrigo/fullPage.js#required-html-structure）中所述的相同包装）。 – Alvaro

寻找这个例子的javascript，我们可以看到该页面与所有元素一个接一个地工作，但是当他放置命令overflow:hidden;时，该页面不显示滚动条。

要赋予所有页面的效果，会有一个“translate3d”效果和页面“滚动”。要显示第二页：

transform: translate3d(0px, -622px, 0px);

对于第三：

transform: translate3d(0px, -1244px, 0px);

我不发现命令到页面，以获得鼠标滚轮，但你可以把将要发射时一个事件你滚动页面。

$("body").bind("mousewheel", function(e) 
{ 
    var delta = e.originalEvent.wheelDelta; // give you the direction 
    // here you apply the transform on the page. 
});

我不知道，如果这个例子页面是使用任何框架，但我发现这个问题，可以帮助你，如果你不想从一开始就做。在这个问题上讨论过的图书馆与迈克尔克劳克评论（alvarotrigo.com/ fullPage）相同。

scroll a full page height up or down with jQuery/Javascript

我知道反应是不完整的，但可以给你一些方向。

来源

2017-03-05 02:45:43

谢谢，可以用指定的部分完成，当我尝试自己的时候，它不适用于其他部分，例如：jsfiddle.net/jzhang172/7b2w82x2 – Snorlax

您需要将代码放入部分，如下所示： [jsfiddle]（https://jsfiddle.net/7b2w82x2/1/） –

如果要插入页面或任何静态对象的标题，请使用'position：fixed'像这样：[jsfiddle]（https：// jsfiddle.net/7b2w82x2/2/） –

在滚动条上滚动100vh部分

回答

相关问题