Quiero hacer un ticker que se detenga cuando el usuario se mueva sobre él y pueda desplazarse hacia arriba y hacia abajo, pero parece que no puedo encontrar la manera de hacerlo para que el usuario pueda desplazarse libremente hacia arriba y hacia abajo para poder ver todos los tickers. a diferencia de ahora, el usuario solo puede ver la parte que es visible cuando pasa el cursor por el código: 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 a las 15:11

1 respuesta

La mejor respuesta

Puedes escuchar el evento de rueda en la tira y ajuste el desplazamiento de acuerdo con el delta de la rueda.

Para configurar el detector de eventos con jQuery, puede usar el .en() Función:

$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.
});

Debe agregarlo antes del final de la devolución de llamada .each(), para que el código completo sea:

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 a las 15:59