javascript - 如何在 jQuery 中调整滚动速度

Question

我想做一个<div>可通过拖动滚动，但滚动速度太快。感觉滚动速度比正常情况快 2 倍。我希望它滚动的量与我滚动的量完全相同。

$("[mouse_scroll]").on({
    'mousemove': function(e) {
        if ($(this).attr("_data-clicked") === "true"){
            updateScrollPos(e, $(this));
        }
    },
    'mousedown': function(e) {
        $(this).attr({"_data-clicked": "true", "_data-clickY": e.pageY, "_data-clickX": e.pageX});
    },
    'mouseup': function() {
        $(this).attr("_data-clicked", "false");
    }
});

var updateScrollPos = function(e, element) {
    element.scrollTop(element.scrollTop() + parseInt(element.attr("_data-clickY")) - e.pageY);
    element.scrollLeft(element.scrollLeft() + parseInt(element.attr("_data-clickX")) - e.pageX);
}

.div{
  width:10em;
  height:10em;
  overflow: scroll;
    user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div mouse_scroll class="div">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque neque magna, auctor id laoreet id, commodo bibendum ex. Duis iaculis, massa et egestas euismod, velit justo viverra nunc, ut tristique erat sem non magna. Donec at placerat urna. Vivamus ornare lobortis ante et pretium. Pellentesque ultricies turpis eu ante gravida rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc commodo augue ligula, at hendrerit sem porttitor non. Etiam lacus nulla, ultricies ut eleifend iaculis, porttitor vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vel justo et ipsum mattis volutpat. Sed tincidunt a justo quis sodales. Sed non ligula velit. In eget lorem elementum, semper lacus in, varius orci. Nullam non aliquet enim, in tincidunt magna. Nullam quis luctus erat.

Pellentesque nec tincidunt dolor, nec vehicula lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer eu mi porttitor nisi faucibus pulvinar sed eget orci. Nulla in nulla rhoncus, consectetur tellus a, rutrum quam. Duis lobortis tortor eu dignissim varius. Praesent placerat vulputate risus, quis feugiat nunc ornare eu. Ut dignissim ex eu bibendum tincidunt. Donec faucibus ex dolor, dapibus faucibus augue bibendum ac. Etiam eu consequat sapien. Curabitur dictum nunc orci, sit amet pellentesque metus pretium a. Fusce magna lorem, laoreet laoreet rhoncus ut, laoreet ut eros. Integer sodales imperdiet turpis, eu dictum arcu feugiat quis. Curabitur mollis metus vel turpis sagittis mattis. Mauris eget egestas turpis. Nulla sagittis turpis vel eros pharetra, non blandit nulla tempor.

Aliquam erat volutpat. Donec condimentum libero sed efficitur auctor. Phasellus ultrices pharetra orci vel viverra. Mauris ultricies hendrerit ultricies. Vestibulum et lacus malesuada arcu fringilla porttitor non et mauris. Nulla sed eleifend dui. Nam ultricies mattis pretium. Curabitur erat turpis, malesuada efficitur ante a, dignissim pharetra diam. Nullam et placerat ante. Donec ante felis, iaculis eu odio efficitur, auctor iaculis ante. Maecenas ornare leo et sapien pharetra placerat. Donec pulvinar ante nec justo lacinia mollis. Praesent vel tortor eget nisl accumsan facilisis non a nulla. Nullam vel tincidunt risus. Nam luctus a est eget faucibus. Donec nec elit scelerisque, euismod diam volutpat, interdum velit.

Aliquam erat volutpat. Fusce nec tincidunt erat. Integer eu sem nec purus interdum bibendum ut ac velit. Duis consectetur nulla eu purus aliquet, ac pharetra ligula elementum. Vivamus massa mauris, ultrices sed nisi vel, molestie convallis nisi. Morbi sit amet maximus metus. Mauris finibus, orci quis dignissim tempor, enim nisl tincidunt justo, a sodales nunc est et purus. Fusce molestie neque vitae lacus elementum, vel auctor neque finibus. Integer in sollicitudin dolor. Aliquam nec lectus malesuada, porttitor urna fringilla, ornare massa.

Mauris ullamcorper eros in magna sollicitudin gravida. Praesent viverra pulvinar efficitur. In in diam sapien. Nunc varius lectus vitae est venenatis tincidunt. Vivamus sit amet dui et dui luctus ultricies ut eu dui. Nullam malesuada pretium sem, ac mollis dolor egestas eu. Cras dignissim lacus id arcu luctus, a ullamcorper sapien accumsan. Vestibulum orci ipsum, mattis eu sapien eget, ultricies fermentum velit. Nullam sit amet tempor leo. Maecenas feugiat, erat et aliquet blandit, massa nisi imperdiet nisl, eget feugiat dolor arcu sit amet eros.
  
</div>

Answer 1

mCustomScrollbar

您可以使用此 jQuery 插件来改变滚动动量。

scrollInertia: integer