javascript - jQueryでドラッグでページをスクロール

Question

kinetic.js と以下のコードを使用してみましたが、IE11 でこれを試すと、スクロールするたびに一番上にジャンプし続けます。

$("html").kinetic();

タブレットと IE10 および 11 でページをスクロール可能にして、ユーザーがモバイル デバイスの場合と同じようにページを押し上げてスクロールできるようにしたいと考えています。

トップにジャンプせずに純粋なJSまたはjQueryでこれを行うにはどうすればよいですか?

Answer 1

このコードは、水平方向および垂直方向のマウス ドラッグ スクロールで機能します。とてもシンプルです。

var curYPos = 0,
    curXPos = 0,
    curDown = false;

window.addEventListener('mousemove', function(e){ 
  if(curDown === true){
    window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
  }
});

window.addEventListener('mousedown', function(e){ curDown = true; curYPos = e.pageY; curXPos = e.pageX; });
window.addEventListener('mouseup', function(e){ curDown = false; }); 

Answer 2

最初の回答に基づいて、これはマウスドラッグ時の水平スクロールのコードです:

var clicked = false, clickX;
$(document).on({
    'mousemove': function(e) {
        clicked && updateScrollPos(e);
    },
    'mousedown': function(e) {
        e.preventDefault();        
        clicked = true;
        clickX = e.pageX;
    },
    'mouseup': function() {
        clicked = false;
        $('html').css('cursor', 'auto');
    }
});

var updateScrollPos = function(e) {
    $('html').css('cursor', 'grabbing');
    $(window).scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
}

Answer 3

Rory のコードをかなり変更し、要素ごとの横スクロールが機能するようにしました。Web アプリケーションの 1 つのビューに複数のスクロール可能なタイルがあるプロジェクトに必要でした。クラスを任意の要素に追加し.drag、おそらく少しスタイリングを行うと、うまくいくはずです。

// jQuery sidescroll code. Can easily be modified for vertical scrolling as well.
// This code was hacked together so clean it up if you use it in prod.
// Written by Josh Moore
// Thanks to Rory McCrossan for a good starting point

// How far away the mouse should move on a drag before interrupting click
// events (your own code must also interrupt regular click events with a
// method that calls getAllowClick())
const THRESHOLD = 32;
var clicked = false;
var allowClick = true;

// mouseX: most recent mouse position. updates when mouse moves.
//     el: jQuery element that will be scrolled.
//    thX: "threshold X", where the mouse was at the beginning of the drag
var mouseX, startY, el, thX;

// Add the .drag class to any element that should be scrollable.
// You may need to also add these CSS rules:
//   overflow: hidden; /* can be replaced with overflow-x or overflow-y */
//   whitespace: none;
function drag() {
    $('.drag').on({
        'mousemove': e => {
            if (el != null && clicked) {
                el.scrollLeft(el.scrollLeft() + (mouseX - e.pageX));
                mouseX = e.pageX;
                allowClick = Math.abs(thX - mouseX) > THRESHOLD ? false : true;
            }
        },
        'mousedown': e => {
            clicked = true;
            // This lets the user click child elements of the scrollable.
            // Without it, you must click the .drag element directly to be able to scroll.
            el = $(e.target).closest('.drag');
            mouseX = e.pageX;
            thX = e.pageX;
        },
        'mouseup': e => {
            clicked = false;
            el = null;
            allowClick = true;
        }
    });
}

function getAllowClick() {
    return allowClick;
}

繰り返しますが、垂直スクロールは使用しませんでしたが、追加するのは非常に簡単です (X を のscrollTop()代わりにY に置き換えるscrollLeft()など)。これが将来誰かに役立つことを願っています！