26

Web ページの一部の div でHTML5 属性を使用していますdraggable = "true"。これらのアイテムのいずれかをページの一番下にドラッグするとページが下にスクロールし、一番上にドラッグするとページが上にスクロールするようにします。

最終的にはサイドバーに再生リストを作成しますが、ページのどこを見ているかによって常に表示されるとは限らないため、ドラッグしているときにページをスクロールする必要があります.

マイページはこちらです。記事の写真をドラッグしてみてください。Chrome では、下にドラッグすると自動的に下にスクロールできますが、上にはスクロールできません。Firefox では、どちらの方向にも自動的にスクロールできません。何か助けはありますか？

これは、開始するための簡単なjsfiddleです。Chrome では、Google アイコンを下にドラッグしてページを下にスクロールできますが、上にはスクロールできません。

4

3 に答える 3

36

何かをドラッグしているときにページをスクロールアップまたはスクロールダウンするコードを次に示します。ドラッグするオブジェクトをページの上部または下部に配置するだけです。:)

    var stop = true;
    $(".draggable").on("drag", function (e) {

        stop = true;

        if (e.originalEvent.clientY < 150) {
            stop = false;
            scroll(-1)
        }

        if (e.originalEvent.clientY > ($(window).height() - 150)) {
            stop = false;
            scroll(1)
        }

    });

    $(".draggable").on("dragend", function (e) {
         stop = true;
    });

    var scroll = function (step) {
        var scrollY = $(window).scrollTop();
        $(window).scrollTop(scrollY + step);
        if (!stop) {
            setTimeout(function () { scroll(step) }, 20);
        }
    }
于 2015-03-13T17:19:35.090 に答える
-14

ドラッグ可能を使用したい場合は、それが HTML 5 の機能である jQuery であることを知っておく必要があります。http : //jqueryui.com/draggable/ ..

このように使用

$( "#draggable" ).draggable();

http://jsfiddle.net/dFPVr/7/

于 2013-09-15T06:54:11.793 に答える