javascript - 使 HTML5 可拖动项目滚动页面？

Question

我在我网页上的一些 div 上使用了 HTML5 属性 draggable = "true"。我想要这样，当您将这些项目之一拖到页面底部时，它会向下滚动页面，而当您将其拖到顶部时，它会向上滚动页面。

我最终会在我的侧边栏上制作一个播放列表，并且由于它不会始终显示在页面上，具体取决于您在页面上查看的位置，因此在您拖动时页面需要滚动。

我的页面是here您可以尝试拖动帖子的图片。在 Chrome 上，当我拖到底部时它会自动让我向下滚动，但不会向上滚动。在 Firefox 上，它不会自动让我向任一方向滚动。有帮助吗？

这是一个简单的 jsfiddle让你开始。在 Chrome 上，您应该能够向下拖动 Google 图标并让它向下滚动页面，但不能向上滚动。

Answer 1

这是一段代码，可以在您拖动某些内容时向上或向下滚动您的页面。只需将拖动对象放在页面的顶部或底部即可。 :)

    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);
        }
    }