web-dev-qa-db-fra.com

faire défiler une hauteur de page entière vers le haut ou vers le bas avec jQuery / Javascript

Je travaille actuellement sur un site qui nécessite quelque chose de similaire en termes de fonctionnalité de défilement: http://www.Apple.com/iphone-5s/

Au milieu de cette question, j'ai mis une partie du site en ligne - http://www.bnacademy.com.au/

J'ai regardé le code du site (Apple) et bien sûr, comme je l'aurais dû soupçonner, je suis venu vide. Je cherche un moyen d'avoir des divs pleine page (avec des images d'arrière-plan) qui peuvent être défilées, et le défilement vers le div suivant se produit sur un seul défilement haut/bas par la souris.

J'ai géré les divs dynamiques pleine page, j'ai presque même eu la fonctionnalité de défilement vers le bas, mais cela ne fonctionne tout simplement pas comme je m'y attendais et j'ai déjà passé quelques jours à ce sujet.

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>

J'utilise le plugin scrollTo de Flesler (je n'ai toujours pas le représentant pour poster plus de 2 liens)

Ce qui fonctionne bien, mais je n'ai pas encore trouvé de moyen de faire défiler de haut en bas comme je le veux. En utilisant ce que j'ai là-haut, si vous (comme beaucoup d'utilisateurs) spammez la molette de défilement pour monter/descendre, je suis presque sûr que le compte wheelDelta est foiré et qu'il ne pourra pas fonctionner correctement.

J'ai essayé pratiquement tous les liens sur les 10 premières pages de Google concernant le défilement de haut en bas en tant que fonctions, ainsi que la plupart des questions sur S.O. qui sont relatifs.

Mon objectif principal est la fonctionnalité de défilement.

jquerycssscroll
13
XstiX

Après avoir dû coder une page comme la vôtre, j'ai créé un plugin simple pour ce type de sites fullPage.js ( Article de blog )

C'est dans sa première version. Je continuerai à l'améliorer autant que possible. Ajouter une méthode à appeler à partir d'un menu serait bien, par exemple. En plus d'utiliser o hastags (#) pour chaque section, etc. Cela devrait être fait dès que je l'utilise dans ma page.

Vous pouvez en savoir plus sur son utilisation sur mon compte github

Démo vivante: http://alvarotrigo.com/fullPage/

Fonctionne dans: (IE 8, Chrome, Firefox, Opera> 11, Safari, appareils tactiles)

J'espère que ça aide!

33
Alvaro

Essayez ce script

$(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

Démo plein écran

10
Vaibs_Cool

J'ai tripoté une solution à un problème similaire.

Tout ce que ma solution fait, c'est surveiller quand la fenêtre défile.

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

S'il fait défiler la fin de la "page" de plus de 50 pixels, jquery anime le défilement jusqu'à la "page" suivante.

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

Il en va de même pour le défilement vers le haut. Cela couvre le défilement par souris, clavier ou javascript.

Consultez le code complet à http://jsfiddle.net/dLCwC/1/

Peut-être que cela sera utile à quelqu'un (faites-moi savoir si c'est le cas ou non).

5
Paul Gorton