Div capture le défilement de la souris
P粉729436537
P粉729436537 2023-11-01 18:57:05
0
2
690

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 ?

P粉729436537
P粉729436537

répondre à tous(2)
P粉457445858

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>
P粉276064178

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;
});
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal