В настоящее время я работаю над сайтом, который требует чего-то похожего с точки зрения функциональности прокрутки: http://www.apple.com/iphone-5s/
В процессе разработки этого вопроса я загрузил часть сайта - http://www.bnacademy.com.au/
Я просмотрел код сайта (apple) и, конечно, как я и предполагал, вышел пустым. Я ищу способ иметь полностраничные 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>
Я использую плагин scrollTo от Flesler (до сих пор нет представителя, чтобы публиковать более 2 ссылок)
Это работает нормально, но мне еще предстоит найти способ прокрутки вверх и вниз так, как я этого хочу. Используя то, что у меня там, если вы (как и многие пользователи) спамите колесо прокрутки, чтобы двигаться вверх/вниз, я почти уверен, что счетчик wheelDelta испортился и он не сможет работать должным образом.
Я попробовал практически каждую ссылку на первых 10 страницах Google, касающуюся прокрутки вверх и вниз как функции, а также большинство вопросов по SO, которые являются относительными.
Моя главная цель - функциональность прокрутки.