jquery.accel-hover-scroll demo

See https://github.com/useful-robot/jquery.accel-hover-scroll for more info

HTML

<script src="https://raw.github.com/useful-robot/jquery.accel-hover-scroll/master/scripts/jquery.accel-hover-scroll.js"></script>
<div class="info"><!----><div ng-if="b.airing.next_episode" class="airing" ng-show="::b.airing.next_episode" data-tooltip="Sunday August 19 3:00 PM (+0000)"><timer interval="1000" countdown="b.airing.countdown - chartTime"><span>Ep 7:</span> <span ng-show="days != 0">6d</span> <span ng-show="hours != 24 &amp;&amp; hours != 0">5h</span><span> 24m</span></timer></div><!----><!----><!----><div ng-if="b.start_date" class="airing airing-date-render"><span>Jul 9, 2018</span></div><!----><div ng-show="b.source || b.total_episodes || b.duration"><div class="source" data-tooltip="Source"><span ng-show="b.source">Manga</span> <span ng-show="!b.source" class="ng-hide">?</span></div><div class="duration" data-tooltip="Episodes x Duration"><span ng-show="b.total_episodes" class="ng-hide">0</span><span ng-show="!b.total_episodes">?</span> eps x <span ng-show="b.duration" class="ng-hide"></span><span ng-show="!b.duration">?</span> <span class="min">mins</span></div></div><div class="description" ng-bind-html="b.description" ng-class="hoverScroll" hover-intent="hoverScroll = &quot;scroll&quot;" ng-mouseleave="hoverScroll = ''" fit-text="">In the story, Ai is an ordinary girl, and a dancer. Her friend Machi is also a dancer, but Machi is a genius. Watching Machi's talent often makes Ai feel down. But one day, Ai finds out Machi's secret: the existence of the Aguu, palm-size entities who grant genius talent upon those who hold them. In order to save Machi, who has become a "Seamstress" who makes Aguu, Ai becomes a "Savior." The Saviors are a group of people who have fought the Seamstresses for generations.<br><br>

(Source: ANN)</div><div class="genres ng-hide" ng-show="::b.genres[0]"><!----><!----><!----></div><div class="genres links" ng-show="b.hashtag || b.youtube_id || b.external_links[0]"><!----> <!----><a ng-if="::b.youtube_id"...

CSS

.card .description {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    font-size: 1.1em;
    padding: 5px 8px;
    text-align: left;
    width: 100%;
}

.card .info {
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border-radius: 0 2px 2px 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    font-size: .55em;
    height: 100%;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    vertical-align: top;
    width: calc(100% - 185px);
}

JavaScript

$(function() {
    $('.hoverscroll').accelHoverScroll({
        // Default settings
        
        // The scroll speed right at the edge of the
        // container, pixels per second
        maxScrollSpeed: 800,
        
        // Percentage of the container's width that'll
        // be hover-scrollable. Choose a small value if
        // you'd like a wider center region where no
        // scrolling occurs.
        scrollGutterPercentage: 0.3,
        
        // You probably won't need to change this, but
        // internally, the scroll speed is determined
        // according to which 'slice' of the gutter the
        // cursor falls in. In other words, there isn't
        // a perfect smooth gradient from slow to fast, but
        // rather small slices that you probably won't notice
        // or need to change. It's sliced this way for efficiency
        // purposes; this plugin utilizes jQuery.fn.animate for
        // its scrolling, and constantly changing the speed of the
        // scroll based on single pixel changes in the mouse location
        // can lead to some choppiness, particularly if there
        // are images involved, or if you're using the 
        // CSS3 transition-enabled jQuery.animation-enhanced
        // plugin
        scrollGutterSlices: 5,
        
        // Control whether cursor changes to left/right
        // arrows when hover-scrolling.
        overrideCursor: true
    });
});