Отключить прокрутку с помощью draggable div

Question

У меня есть div, который можно перетаскивать. Когда я перетаскиваю его близко к одному из краев на веб-странице, прокрутите весь веб-сайт. Могу ли я отключить эту функцию? (Я могу в основном использовать div для перемещения по веб-странице, но я хочу, чтобы это было ограничено тем, где я нахожусь) Я использую скрипт jquery draggable!

Заголовок:

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> 

Примечание: это не мой полный код, просто перетаскивать ДИВ часть!

CSS-код:

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

Answer 1

Вы можете установить overflow:hidden на body или элемента контейнера на сопротивление 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 

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