How can I make an interactive ticker?

Question

I want to make a ticker that stops when user hovers over it and he can scroll up and down but I can't seem to find the way to make it so the user can freely scroll up and down so he can see all of the tickers unlike now that the user can only see the portion that is visible when he hovers codepen link: 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(); //aka '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

You can listen to the wheel event on the strip and adjust the offset according to the wheel delta.

To setup event listener with jQuery you can use the .on() function:

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

You should add it before the end of the .each() callback, so the full code is:

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