Div capture le défilement de la souris

Question

J'ai actuellement une page sous la forme suivante

<div id="content">
    <div id="content-page-1">
    <!--content-->
    </div>
    <div id="content-page-2">
    <!--content-->
    </div>
</div>

Y a-t-il un moyen de faire défiler

1. Coller/Aligner div (100 % de hauteur et 100 % de largeur de la zone d'affichage)
2. Faites défiler automatiquement jusqu'au div suivant lorsque le défilement est détecté

Utilisez jquery ?

Answer 1

J'ai essayé différents plugins mais ils avaient tous des problèmes pour déclencher plusieurs événements dans mvc, j'ai donc trouvé cette solution en utilisant underscore.js

<script  type="text/javascript">
    $(document).ready(function () {
            var isc = _.throttle(function (event) {
                if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                    if (event.handled !== true) {
                        $.post('@path', function (html) {
                            $('#user-feed').append(html);
                        });
                    }
                }
            }, 300);

            $(window).scroll(isc);
    });

</script>

Answer 2

Si vous écoutez faire défiler les événements sur le nœud, vous pouvez facilement utiliser un plugin comme scrollTo pour faire défiler en douceur jusqu'au "div suivant" ou au div précédent (quelle que soit la manière dont vous le définissez).

var prevScrollTop = 0;
var $scrollDiv    = $('div#content');
var $currentDiv   = $scrollDiv.children('div:first-child');
$scrollDiv.scroll(function(eventObj)
{
    var curScrollTop = $scrollDiv.scrollTop();
    if (prevScrollTop < curScrollTop)
    {
    // Scrolling down:
        $currentDiv = $currentDiv.next().scrollTo();
    }
    else if (prevScrollTop > curScrollTop)
    {
    // Scrolling up:
        $currentDiv = $currentDiv.prev().scrollTo(); 
    }
    prevScrollTop = curScrollTop;
});