我目前正在一个网站上工作,该网站在滚动功能方面需要类似的东西: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;
}
查询:
<!-- 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 计数被搞砸了,它将无法正常运行。
我几乎尝试了谷歌前 10 页上与作为功能向上和向下滚动相关的每个链接,以及关于 SO 的大多数相对问题。
我的主要目标是滚动功能。