Je veux faire un ticker qui s'arrête lorsque l'utilisateur passe dessus et il peut faire défiler vers le haut et vers le bas, mais je n'arrive pas à trouver le moyen de le faire pour que l'utilisateur puisse librement faire défiler vers le haut et vers le bas afin qu'il puisse voir tous les tickers contrairement à maintenant que l'utilisateur ne peut voir que la partie qui est visible lorsqu'il survole le lien codepen: https://codepen.io/amin-rather/pen/ejJgZO

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
        travelocity: 0.03
    }, settings);
    return this.each(function() {
        var $strip = jQuery(this);
        $strip.addClass("newsticker")
        var stripHeight = 1;
        $strip.find("li").each(function(i) {
            stripHeight += jQuery(this, i).outerHeight(true); // thanks to Michael Haszprunar and Fabien Volpi
        });
        var $mask = $strip.wrap("<div class='mask'></div>");
        var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
        var containerHeight = $strip.parent().parent().height(); //a.k.a. 'mask' width  
        $strip.height(stripHeight);
        var totalTravel = stripHeight;
        var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye     
        function scrollnews(spazio, tempo) {
            $strip.animate({
                top: '-=' + spazio
            }, tempo, "linear", function() {
                $strip.css("top", containerHeight);
                scrollnews(totalTravel, defTiming);
            });
        }
        scrollnews(totalTravel, defTiming);
        $strip.hover(function() {
                jQuery(this).stop();
            },
            function() {
                var offset = jQuery(this).offset();
                var residualSpace = offset.top + stripHeight;
                var residualTime = residualSpace / settings.travelocity;
                scrollnews(residualSpace, residualTime);
            });
    });
};

$(function() {
    $("ul#ticker01").liScroll();
});
.holder {
    background - color: #bbdccb;
    width: 300 px;
    height: 250 px;
    overflow: hidden;
    padding: 10 px;
    font - family: Helvetica;
}

.holder.mask {
    position: relative;
    left: 0 px;
    top: 10 px;
    width: 300 px;
    height: 240 px;
    overflow: hidden;
}

.holder ul {
    list - style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.holder ul li {
    padding: 10 px 0 px;
}

.holder ul li a {
    color: darkred;
    text - decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="holder">
          <ul id="ticker01">
                      <li><span>20/10/2018</span><a href="#"> T2 Exam of classes pre Nursery to 4th to start from 2/10/2018</a></li>
                      <li><span>15/07/2018</span><a href="#"> Student for INSPIRE AWARD to be nominated on 16th july</a></li>
                     <li><span>14/07/2018</span><a href="#"> School offers free admission for all classes</a></li>
                      <li><span>14/07/2018</span><a href="#"> Summer vacation to start from 19th july 2018</a></li>
                      <li><span>14/07/2018</span><a href="#"> Syllabus copies distributed among students</a></li>
                  <li><span>14/07/2018</span><a href="#"> Result of all classes will be announced after confirmation from higher authorities</a></li>
            <li><span>14/07/2018</span><a href="#"> Normal class work resumed after T1 exam</a></li>
            <li><span>14/07/2018</span><a href="#"> Uniform distributed among students</a></li>
                </ul>
        </div>
1
Philip Scriver 4 nov. 2019 à 15:11

1 réponse

Meilleure réponse

Vous pouvez écouter le événement de roue sur la bande et ajustez le décalage en fonction du delta de la roue.

Pour configurer l'écouteur d'événements avec jQuery, vous pouvez utiliser le .sur() une fonction:

$strip.on('wheel', function (e) {        // Attach listener to the wheel event on the $strip.
  e.preventDefault();                    // Disable default browser scrolling, when the user scroll over the $strip.
  var offset = jQuery(this).offset();    // Get current offset of the $strip.

  var delta = e.originalEvent.deltaY;    // Get amount of the scroll.
  // We can't use deltaY directly, as it's amount is not consistent between browsers, so:
  var direction = Math.sign(delta);      // Get direction of the scroll.
  var sensitivity = 5;                   // You should adjust sensitivity for your needs.
  offset.top += direction * sensitivity; // Calculate new top offset.

  jQuery(this).offset(offset);           // Set new offset to the $strip.
});

Vous devez l'ajouter avant la fin du rappel .each(), pour que le code complet soit:

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
        travelocity: 0.03
    }, settings);
    return this.each(function() {
        var $strip = jQuery(this);
        $strip.addClass("newsticker")
        var stripHeight = 1;
        $strip.find("li").each(function(i) {
            stripHeight += jQuery(this, i).outerHeight(true); // thanks to Michael Haszprunar and Fabien Volpi
        });
        var $mask = $strip.wrap("<div class='mask'></div>");
        var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
        var containerHeight = $strip.parent().parent().height(); //a.k.a. 'mask' width  
        $strip.height(stripHeight);
        var totalTravel = stripHeight;
        var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye     
        function scrollnews(spazio, tempo) {
            $strip.animate({
                top: '-=' + spazio
            }, tempo, "linear", function() {
                $strip.css("top", containerHeight);
                scrollnews(totalTravel, defTiming);
            });
        }
        scrollnews(totalTravel, defTiming);
        $strip.hover(function() {
                jQuery(this).stop();
            },
            function() {
                var offset = jQuery(this).offset();
                var residualSpace = offset.top + stripHeight;
                var residualTime = residualSpace / settings.travelocity;
                scrollnews(residualSpace, residualTime);
            });
        $strip.on('wheel', function (e) {
            e.preventDefault();
            var offset = jQuery(this).offset();
            var delta = e.originalEvent.deltaY;
            var direction = Math.sign(delta);
            var sensitivity = 5;
            offset.top += direction * sensitivity;
            jQuery(this).offset(offset);
        });
    });
};

$(function() {
    $("ul#ticker01").liScroll();
});
0
Nina Lisitsinskaya 4 nov. 2019 à 15:59