阻止元素在移动设备上被拖出屏幕

Question

我有一个可以向上/向下拖动的元素。如果用户位于页面顶部，则元素 (div) 将在距离顶部 50px 时停止拖动（如果用户一直滚动到底部，则底部相同）。

问题：如果用户将页面向下滚动一点，那么 div 可能会被拖出视图。我希望它在从顶部和底部消失之前停止。图片手机屏幕，您可以向上/向下拖动屏幕右侧的一个小框，但不能将其拖出视图，即使您向上/向下滚动页面也是如此。

我知道我需要确定页面是否滚动，然后从文档高度等中减去它，等等......（或类似的东西）。或者也许有更好的解决方案我不知道。

这是我目前所拥有的，使 div 可沿 y 轴拖动：

    this.makeDraggable = function(){
        var docHeight = $(document).height();
        var winHeight = $(window).height();

        if(eventSupported('touchstart')){
            el.addEventListener("touchmove", handleMove, false);
        }

        function handleMove(e) {
            e.preventDefault();
            var y = e.changedTouches[0].pageY;
            var bottom = winHeight - y;

            if(bottom > 50 && y > 50)
            $el.offset({
                top: y
            });
        }
    }

Answer 1

找到解决办法：

 this.makeDraggable = function(){
        var docHeight = $(document).height();
        var winHeight = $(window).height();

        if(eventSupported('touchstart')){
            el.addEventListener("touchmove", handleMove, false);
        }

        function handleMove(e) {
            e.preventDefault();

            var winScroll = $(window).scrollTop(); // scrolled away from top
            var y = e.changedTouches[0].pageY;
            var top = winScroll + 50;
            var bottom = winScroll + winHeight - 50;

            if(bottom > y && y > top)
            $el.offset({
                top: y
            });
        }
    }

$(window).scrollTop() + $(window).height() 永远是“窗口”的底部。