Как я могу сделать интерактивный тикер?

Question

Я хочу сделать тикер, который останавливается, когда пользователь наводит курсор на него, и он может прокручивать вверх и вниз, но я не могу найти способ сделать так, чтобы пользователь мог свободно прокручивать вверх и вниз, чтобы он мог видеть всеиз тикеров в отличие от теперь, когда пользователь может видеть только ту часть, которая видна, когда он наводит ссылку на кодовую ссылку: 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>

Answer 1

Вы можете прослушать событие wheel на полосе и отрегулировать смещение в соответствии с дельтой колеса.

Для настройки прослушивателя событий с помощью jQuery вы можете использовать .on() функция:

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

Вы должны добавить ее до окончания обратного вызова .each(), поэтому полный код:

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();
});