我目前正在开发一个在滚动功能方面需要与此类似的网站:http://www.apple.com/iphone-5s/
在提出此问题的过程中,我上传了部分网站 - http://www.bnacademy.com.au/
我查看了该网站的(苹果)代码,当然,正如我应该怀疑的那样,它是空的。 我正在寻找一种可以滚动浏览全页div(带背景图像)的方法,并且通过鼠标在单个向上/向下滚动中滚动到下一个div。
我已经处理了动态的全页div,我几乎甚至没有滚动功能,但它只是没有按照我的预期工作,而且我已经花了几天时间。
HTML:
<div class="splashPage mainDiv"></div>
<div id="containerHomes" class="mainDiv homesPosition"></div>
CSS:
.homesPosition {
top: 100%;
}
.splashPage {
background: black;
z-index: -200;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#containerHomes {
z-index: -200;
width: 100%;
height: 100%;
position: absolute;
left: 0;
background:url(../img/background-placeholder.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Jquery的:
<!-- Keep the div at max page height and width -->
<script type="text/javascript">
var height = $(window).height();
var width = $(window).width();
$(function() {
$(window).resize(function() {
$(".mainDiv").height(height);
$(".mainDiv").width(width);
$("#sidebar").height(height);
var height = $(window).height();
var width = $(window).width();
});
});
</script>
<!-- Scroll up and down detection/movement -->
<script type="text/javascript">
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
$(window).scrollTo('0%', 1000);
}
else {
$(window).scrollTo('100%', 1000);
}
event.preventDefault()
});
</script>
我正在使用Flesler的scrollTo插件(实际上还没有代表发布超过2个链接)
哪种方法运行正常,但我还没有找到一种方法来完全按照我想要的方式上下滚动。使用我在那里的东西,如果你(像很多用户一样)垃圾滚轮上下移动我很确定wheelDelta计数搞砸了,它将无法正常运行。
我几乎尝试了google上前10页的每个链接,这些链接都是关于向上和向下滚动的功能,以及关于S.O.的大多数问题。这是相对的。
我的主要目标是滚动功能。
答案 0 :(得分:33)
在为您的网页编写代码后,我为这类网站创建了一个简单的插件fullPage.js(Blog article)
它是第一个版本。我将尽我所能继续改进。例如,添加要从菜单调用的方法会很好。以及每个部分使用o hastags(#),依此类推。这应该在我在我的页面中使用时尽快完成。
找到有关其用法的更多信息生活演示:http://alvarotrigo.com/fullPage/
使用:(IE 8,Chrome,Firefox,Opera&gt; 11,Safari,触控设备)
我希望它有所帮助!
答案 1 :(得分:10)
试试这个脚本
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
dir = 'down';
} else {
dir = 'up';
}
// find currently visible div :
div = -1;
divs.each(function(i){
if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
div = i;
}
});
if (dir == 'up' && div > 0) {
div--;
}
if (dir == 'down' && div < divs.length -1) {
div++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 200);
return false;
});
<强> Fullscreen Demo 强>
答案 2 :(得分:4)
我一直在摆弄类似问题的解决方案。
我的所有解决方案都是在窗口滚动时监控。
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
如果它滚动超过“页面”的末尾超过50px jquery动画滚动到下一个“页面”。
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
向上滚动也是如此。这包括通过鼠标,键盘或javascript滚动。
查看http://jsfiddle.net/dLCwC/1/
的完整代码也许它对某人有用(让我知道它是否存在)。
答案 3 :(得分:-2)
确保身高不高:100%或高度:100vh。我有这个完全相同的问题,唯一修复它的是删除它。