如何使该脚本动画化？

Question

I have a scrolling script, how to make animated it? (make it smooth)

$(document).ready(function() {
    $.event.props.push("wheelDelta");
        $( '#lololol' ).on( 'mousewheel DOMMouseScroll', function ( e ){
            var delta = e.wheelDelta || -e.detail;              
            this.scrollLeft += ( delta < 0 ? 1 : -1 ) * 120;
            e.preventDefault();
        });
});

Answer 1

You can replace this line

this.scrollLeft += ( delta < 0 ? 1 : -1 ) * 120;

with

$(this).animate({
    scrollLeft: $(this).scrollLeft() + ( delta < 0 ? 1 : -1 ) * 120
});

Optionally, you can specify second parameter for the $.fn.animate function to provide variable animation time.
More info here

Answer 2

You can animate the scrolling by animating the scrollLeft -property using the animate -function of JQuery $elem.animate({ scrollLeft: value }, durationMs, 'easeFn', callbackFn)

$(document).ready(function() {
    $.event.props.push("wheelDelta");

    $('#lololol').on('mousewheel DOMMouseScroll', function(e) {
        e.preventDefault();

        var delta = e.wheelDelta || -e.detail;    
        var scrollLeft = $(this).scrollLeft() + (delta < 0 ? 1 : -1) * 120;

        $(this).animate({ scrollLeft: scrollLeft }, 500, 'swing', function() { 
            // callback fn
        });
    });
});