Прокрутите всю высоту страницы вверх или вниз с помощью jQuery/Javascript

В настоящее время я работаю над сайтом, который требует чего-то похожего с точки зрения функциональности прокрутки: 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, которые являются относительными.

Моя главная цель - функциональность прокрутки.

Ответ 1

После того, как вам нужно создать такую страницу, как я, я создал простой плагин для таких сайтов fullPage.js (Статья в блоге)

Это первая версия. Я буду продолжать совершенствовать его, насколько могу. Например, добавление метода, который будет вызываться из меню, будет приятным. Также используйте o hastags (#) для каждого раздела и т.д. Это должно быть сделано в ближайшее время, когда я использую его на своей странице.

Подробнее о его использовании можно узнать в моей учетной записи github

Живая демонстрация: http://alvarotrigo.com/fullPage/

Работа в: (IE 8, Chrome, Firefox, Opera > 11, Safari, Touch устройствах)

Надеюсь, это поможет!

Ответ 2

Попробуйте этот скрипт

$(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;
    });

FIDDLE DEMO

Полноэкранный Демо

Ответ 3

Я искал решение аналогичной проблемы.

Все мое решение - это монитор при прокрутке окна.

if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {

Если он прокручивается за конец "страницы" более чем на 50 пикселей jquery, анимируется прокрутка до следующей "страницы".

$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});

Он делает то же самое для прокрутки. Это охватывает прокрутку с помощью мыши, клавиатуры или javascript.

Посмотрите полный код на http://jsfiddle.net/dLCwC/1/

Может быть, это кому-то поможет (дайте мне знать, если это так, или нет).

Ответ 4

Удостоверьтесь, что у вас нет высоты: 100% или высота: 100vh на теле. У меня была такая же проблема, и единственное, что исправлено, это удаление этого.