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

问题描述

我想<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>

标签： javascriptjqueryhtmlcss

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

问题描述

解决方案

推荐阅读