Skip to content

Commit bbf9ea0

Browse files
committed
Draggable: ignore overflow:hidden containers with scroll option
While it is true that overflow:hidden elements can be scrolled programatically, this breaks user expectation. Therefore, do not scroll inside an overflow:hidden container.
1 parent be4c0fc commit bbf9ea0

File tree

2 files changed

+28
-9
lines changed

2 files changed

+28
-9
lines changed

tests/unit/draggable/draggable_options.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -878,6 +878,20 @@ test( "scroll, scrollSensitivity, and scrollSpeed", function() {
878878
TestHelpers.draggable.restoreScroll( document );
879879
});
880880

881+
test( "scroll ignores containers that are overflow: hidden", function() {
882+
expect( 2 );
883+
884+
var element = $( "#draggable1" ).draggable({ scroll: true }).appendTo( "#scrollParent" );
885+
886+
element.simulate( "drag", {
887+
dx: 1300,
888+
dy: 1300
889+
});
890+
891+
equal( $( "#scrollParent" ).scrollTop(), 0, "container doesn't scroll vertically" );
892+
equal( $( "#scrollParent" ).scrollLeft(), 0, "container doesn't scroll horizontally" );
893+
});
894+
881895
test( "#6817: auto scroll goes double distance when dragging", function() {
882896
expect( 2 );
883897

ui/draggable.js

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -827,30 +827,35 @@ $.ui.plugin.add("draggable", "opacity", {
827827

828828
$.ui.plugin.add("draggable", "scroll", {
829829
start: function( event, ui, i ) {
830-
if ( i.scrollParent[ 0 ] !== i.document[ 0 ] && i.scrollParent[ 0 ].tagName !== "HTML" ) {
831-
i.overflowOffset = i.scrollParent.offset();
830+
if ( !i.scrollParentNotHidden ) {
831+
i.scrollParentNotHidden = i.helper.scrollParent( false );
832+
}
833+
834+
if ( i.scrollParentNotHidden[ 0 ] !== i.document[ 0 ] && i.scrollParentNotHidden[ 0 ].tagName !== "HTML" ) {
835+
i.overflowOffset = i.scrollParentNotHidden.offset();
832836
}
833837
},
834838
drag: function( event, ui, i ) {
835839

836840
var o = i.options,
837841
scrolled = false,
842+
scrollParent = i.scrollParentNotHidden[ 0 ],
838843
document = i.document[ 0 ];
839844

840-
if ( i.scrollParent[ 0 ] !== document && i.scrollParent[ 0 ].tagName !== "HTML" ) {
845+
if ( scrollParent !== document && scrollParent.tagName !== "HTML" ) {
841846
if ( !o.axis || o.axis !== "x" ) {
842-
if ( ( i.overflowOffset.top + i.scrollParent[ 0 ].offsetHeight ) - event.pageY < o.scrollSensitivity ) {
843-
i.scrollParent[ 0 ].scrollTop = scrolled = i.scrollParent[ 0 ].scrollTop + o.scrollSpeed;
847+
if ( ( i.overflowOffset.top + scrollParent.offsetHeight ) - event.pageY < o.scrollSensitivity ) {
848+
scrollParent.scrollTop = scrolled = scrollParent.scrollTop + o.scrollSpeed;
844849
} else if ( event.pageY - i.overflowOffset.top < o.scrollSensitivity ) {
845-
i.scrollParent[ 0 ].scrollTop = scrolled = i.scrollParent[ 0 ].scrollTop - o.scrollSpeed;
850+
scrollParent.scrollTop = scrolled = scrollParent.scrollTop - o.scrollSpeed;
846851
}
847852
}
848853

849854
if ( !o.axis || o.axis !== "y" ) {
850-
if ( ( i.overflowOffset.left + i.scrollParent[ 0 ].offsetWidth ) - event.pageX < o.scrollSensitivity ) {
851-
i.scrollParent[ 0 ].scrollLeft = scrolled = i.scrollParent[ 0 ].scrollLeft + o.scrollSpeed;
855+
if ( ( i.overflowOffset.left + scrollParent.offsetWidth ) - event.pageX < o.scrollSensitivity ) {
856+
scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft + o.scrollSpeed;
852857
} else if ( event.pageX - i.overflowOffset.left < o.scrollSensitivity ) {
853-
i.scrollParent[ 0 ].scrollLeft = scrolled = i.scrollParent[ 0 ].scrollLeft - o.scrollSpeed;
858+
scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft - o.scrollSpeed;
854859
}
855860
}
856861

0 commit comments

Comments
 (0)