Détecter la fin de défilement horizontal div avec jQuery

Donc, j'ai quelques données jeté dans une div. Il est divisé en morceaux par jour. Il défile horizontalement avec l'utilisation de jQuery et de la roulette de la souris plugin.

J'ai besoin de mettre le feu à un événement lorsque la div a atteint son point terminal (au plus loin à gauche, le plus loin à droite). Je pense que c'est possible avec la manière dont il est actuellement mis en œuvre pour calculer lorsque vous ne pouvez pas faire défiler toute en détectant les données extraites dans la roulette de la souris plugin. J'ai juste besoin d'un coup de pouce dans la bonne direction. Voici le code qui ne le défilement horizontal pour moi:

$(document).ready(function () {        
    $('#timeline').mousedown(function (event) {
        $(this)
            .data('down', true)
            .data('x', event.clientX)
            .data('scrollLeft', this.scrollLeft);
        return false;
    }).mouseup(function (event) {
        $(this).data('down', false);
    }).mousemove(function (event) {
        if ($(this).data('down') == true) {
            this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
        }
    }).mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
    }).css({
        'overflow' : 'hidden',
        'cursor' : '-moz-grab'
    });
});

Quelqu'un peut-il me donner quelques conseils? Merci!

Pourquoi la fantaisie de défilement? Si vous venez de supprimer le défilement vertical et configurer le overflow-x:scroll ça va défiler horizontalement sans le hack. Je devine qu'il y a quelque chose qui vous empêche de le faire?
J'utilise un plugin qui donne l'effet de défilement horizontale sans les barres de défilement. C'est comme se regarder dans une fenêtre et de voir ce qui passe devant elle et rien d'autre.

OriginalL'auteur jmorhardt | 2011-05-11

8

Hey, j'ai préparé une page pour vous, avec la mise en œuvre. Vous pouvez voir comment détecter la fin de la zone de défilement avec jQuery.

Pour l'ensemble du document, vous devez détecter en javascript si .scrollTop est devenu égal à .scrollHeight. Avec jQuery, il serait à détecter:
```
if ( $(document).scrollTop() == ( $(document).height() - $(window).height() ) {
  //Do something here ...
}
```
L'on fait de même pour la largeur. Jetez un oeil sur l'exemple avec div ici.

Merci pour la réponse rapide. Dans l'intervalle, j'avais mis en place un plugin qui semble faire ce dont j'avais besoin. Cependant, avec cette solution, j'ai été en mesure d'éliminer la nécessité pour le plugin.
Est-il un moyen de limiter les cas de tir? J'aimerais qu'il incendie la première fois que vous faites défiler jusqu'à elle et de ne jamais recommencer. Des idées?
Jamais l'esprit - je viens d'ajouter une classe à l'objet lorsqu'il déclenche l'événement. Puis-je vérifier pour voir si il a la classe pour décider si l'événement doit se déclencher à nouveau. Est-ce que sembler comme une bonne solution?
Aussi, cela fonctionne très bien pour l'extrême gauche de la div, mais qu'en est la droite?
Pour la partie droite jouent avec le même vars. Ce sont les seuls de défilement liées à des variables que vous pouvez utiliser. La solution avec la classe est ok, mais vous pouvez utiliser .data pour stocker des variables et de vérifier, de cette façon seront cachés par les consommateurs 🙂

OriginalL'auteur Arman P.

Voici le code que vous voulez.
Il s'est avéré que les travaux sur IE, Safari, Chrome, Firefox, etc.

Ici est la partie HTML.

    <div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
        <div id="inner-wrap" style="float:left;">
            <!-- 'Put Inline contains here like below.' -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!--  ...  -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!-- 'Put Inline contains here like above.' -->
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px;   margin-top:40px">
            <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
            <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
        </div>
    </div>

Ici jQuery est partie dans des fonctions JavaScript.

    function scrollArrowShow() {
        var maxScroll = ($('#inner-wrap').width() - $('#slide-wrap').scrollLeft()) - $('#slide-wrap').width();
        if ( 0 == $('#slide-wrap').scrollLeft()) {
            $('#scroll_L_Arrow').css({visibility: 'hidden'});
        }else{
            $('#scroll_L_Arrow').css({visibility: 'visible'});
        }
        if ( 0 == maxScroll) {
            $('#scroll_R_Arrow').css({visibility: 'hidden'});
        }else{
            $('#scroll_R_Arrow').css({visibility: 'visible'});
        }
    }

       function scrollThumb(direction) {
        if (direction=='Go_L') {
            $('#slide-wrap').animate({
                scrollLeft: "-=" + 250 + "px"
            }, function(){
                //createCookie('scrollPos', $('#slide-wrap').scrollLeft());
                scrollArrowShow();
            });
        }else
        if (direction=='Go_R') {
            $('#slide-wrap').animate({
                scrollLeft: "+=" + 250 + "px"
            }, function(){
                //createCookie('scrollPos', $('#slide-wrap').scrollLeft());
                scrollArrowShow();
            });
        }
       }

OriginalL'auteur NOTSermsak

$('.div-with-scrollbar').scroll(function () {
  var $elem = $('.div-with-scrollbar');
  var newScrollLeft = $elem.scrollLeft(),
      width = $elem.width(),
      scrollWidth = $elem.get(0).scrollWidth;
  var offset = 0;
  if (scrollWidth - newScrollLeft - width === offset) {
    alert('right end')
  }
  if (newScrollLeft === 0) {
    alert('left')
  }
});

Pouvez-vous améliorer votre réponse en disant pourquoi cela fonctionne?

OriginalL'auteur Sandhu

Vous devez vous connecter pour publier un commentaire.