why does the scrollbar scroll when I move the div down to the page

Question

$('#aaa').draggable();

* {
    margin: 0;
    padding: 0;
}

#aaa {
    width: 800px;
    height: 800px;
    position: absolute;
    background: red;
}

.wrap {
    height: 2000px;
    position: relative;
    ;
}

<div class="wrap">
    <div id='aaa'></div>
</div>
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>

when I drag the div overflow the page, the scrollbar will scroll. How do I prevent it from scrolling

Does this answer your question? [How to disable page scroll while dragging draggable in jquery?](https://stackoverflow.com/questions/32395936/how-to-disable-page-scroll-while-dragging-draggable-in-jquery) — Triby, Dec 24 '19 at 02:56

score 0 · Answer 1 · answered Dec 24 '19 at 02:21

This is the default behavior and can be disabled by adding scroll: false option. https://api.jqueryui.com/draggable/#option-scroll

$('#aaa').draggable({
    scroll: false
});

* {
    margin: 0;
    padding: 0;
}

#aaa {
    width: 800px;
    height: 800px;
    position: absolute;
    background: red;
}

.wrap {
    height: 2000px;
    position: relative;
}

<div class="wrap">
    <div id='aaa'></div>
</div>
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>

This doesn't stop the Horizontal scrolling however – Shiny Dec 24 '19 at 02:27 — Shiny, Dec 24 '19 at 02:27

Shiny · Answer 2 · 2019-12-30T17:54:49.560

You can add overflow: auto to the styling of the .wrap class, which will stop horizontal and vertical scrolling while dragging that element

$('#aaa').draggable();

* {
    margin: 0;
    padding: 0;
}

#aaa {
    width: 800px;
    height: 800px;
    position: absolute;
    background: red;
}

.wrap {
    height: 2000px;
    position: relative;
    overflow: auto;
}

<div class="wrap">
    <div id='aaa'></div>
</div>
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>

Hitesh Kumar · Answer 3 · 2019-12-24T02:47:17.727

0

You can try like this

#wrap{width: 800px; height: 800px; position: absolute; overflow: scroll; background: red; }

$( "#aaa" ).draggable({ containment: '#wrap',scroll: false })

edited Dec 24 '19 at 02:47

answered Dec 24 '19 at 02:29

Hitesh Kumar

383
2
6

Thank you very much, but I want to know what does the attribute of scroll do. – ZhuoYan Dec 24 '19 at 03:39
It sets the selected div scroll behaviour to false – Hitesh Kumar Dec 24 '19 at 03:52
if I do not use jquery-ui, I make div draggable with original javascript, by 'mousedown', 'mousemove', 'mouseup', how do I prevent it from scrolling? – ZhuoYan Dec 24 '19 at 04:01

why does the scrollbar scroll when I move the div down to the page

3 Answers3