使用可拖动的 div 禁用滚动答案

【问题标题】：Disable scrolling with draggable div使用可拖动的 div 禁用滚动
【发布时间】：2015-03-10 09:14:12
【问题描述】：

我有一个可拖动的 div。当我将它拖到靠近网页的边缘之一时，整个网站都会滚动。我可以禁用此功能吗？（我基本上可以使用 div 在网页中移动，但我希望它仅限于我目前所在的位置）我用jquery的可拖动脚本！

标题：

link href="stilmallaudioplayer.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
</style>
<script>
$(function() {
$( "#audioplayer" ).draggable();
});
</script>

身体：

<div id="audioplayer" class="ui-widget-content">
<audio controls class="ui-widget-content">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>

注意：这不是我的完整代码，只是可拖动的 div 部分！

CSS：

#audioplayer { 
    padding: 0.5em; 
    z-index: 3;
    position: absolute;
    top: 100px;
    left: 100px;
}

【问题讨论】：

标签： jquery scroll draggable

【解决方案1】：

您可以在body 上设置overflow:hidden 或在拖动start 上设置容器元素，并在拖动stop 上删除它：

Js：

$("#audioplayer").draggable({
    start: function (event, ui) {
        $('body').addClass("overflow");
    },
    stop: function (event, ui) {
        $('body').removeClass("overflow");
    }
});

CSS：

overflow{overflow:hidden;} //Use inline style or  !important if other css overrides this

【讨论】：

【解决方案2】：

这似乎有效：fiddle

jQuery

$(function () {
    $("#audioplayer").draggable(
    { containment: "html", scroll: false }

    );
});

CSS

html, body {
    height:100%;
    overflow:hidden;
}

    #audioplayer {
        padding: 0.5em;
        z-index: 3;
        position: absolute;
        top: 100px;
        left: 100px;
        border: 1px solid black;
        height:20px;
        width: 100px;
    }

【讨论】：