Skip to content
Permalink
Browse files

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.
  • Loading branch information...
mikesherov committed Aug 10, 2014
1 parent be4c0fc commit bbf9ea0942622a40d1adafeaed7045e0cf6ff8fd
Showing with 28 additions and 9 deletions.
  1. +14 −0 tests/unit/draggable/draggable_options.js
  2. +14 −9 ui/draggable.js
@@ -878,6 +878,20 @@ test( "scroll, scrollSensitivity, and scrollSpeed", function() {
TestHelpers.draggable.restoreScroll( document );
});

test( "scroll ignores containers that are overflow: hidden", function() {
expect( 2 );

var element = $( "#draggable1" ).draggable({ scroll: true }).appendTo( "#scrollParent" );

element.simulate( "drag", {
dx: 1300,
dy: 1300
});

equal( $( "#scrollParent" ).scrollTop(), 0, "container doesn't scroll vertically" );
equal( $( "#scrollParent" ).scrollLeft(), 0, "container doesn't scroll horizontally" );
});

test( "#6817: auto scroll goes double distance when dragging", function() {
expect( 2 );

@@ -827,30 +827,35 @@ $.ui.plugin.add("draggable", "opacity", {

$.ui.plugin.add("draggable", "scroll", {
start: function( event, ui, i ) {
if ( i.scrollParent[ 0 ] !== i.document[ 0 ] && i.scrollParent[ 0 ].tagName !== "HTML" ) {
i.overflowOffset = i.scrollParent.offset();
if ( !i.scrollParentNotHidden ) {
i.scrollParentNotHidden = i.helper.scrollParent( false );
}

if ( i.scrollParentNotHidden[ 0 ] !== i.document[ 0 ] && i.scrollParentNotHidden[ 0 ].tagName !== "HTML" ) {
i.overflowOffset = i.scrollParentNotHidden.offset();
}
},
drag: function( event, ui, i ) {

var o = i.options,
scrolled = false,
scrollParent = i.scrollParentNotHidden[ 0 ],
document = i.document[ 0 ];

if ( i.scrollParent[ 0 ] !== document && i.scrollParent[ 0 ].tagName !== "HTML" ) {
if ( scrollParent !== document && scrollParent.tagName !== "HTML" ) {
if ( !o.axis || o.axis !== "x" ) {
if ( ( i.overflowOffset.top + i.scrollParent[ 0 ].offsetHeight ) - event.pageY < o.scrollSensitivity ) {
i.scrollParent[ 0 ].scrollTop = scrolled = i.scrollParent[ 0 ].scrollTop + o.scrollSpeed;
if ( ( i.overflowOffset.top + scrollParent.offsetHeight ) - event.pageY < o.scrollSensitivity ) {
scrollParent.scrollTop = scrolled = scrollParent.scrollTop + o.scrollSpeed;
} else if ( event.pageY - i.overflowOffset.top < o.scrollSensitivity ) {
i.scrollParent[ 0 ].scrollTop = scrolled = i.scrollParent[ 0 ].scrollTop - o.scrollSpeed;
scrollParent.scrollTop = scrolled = scrollParent.scrollTop - o.scrollSpeed;
}
}

if ( !o.axis || o.axis !== "y" ) {
if ( ( i.overflowOffset.left + i.scrollParent[ 0 ].offsetWidth ) - event.pageX < o.scrollSensitivity ) {
i.scrollParent[ 0 ].scrollLeft = scrolled = i.scrollParent[ 0 ].scrollLeft + o.scrollSpeed;
if ( ( i.overflowOffset.left + scrollParent.offsetWidth ) - event.pageX < o.scrollSensitivity ) {
scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft + o.scrollSpeed;
} else if ( event.pageX - i.overflowOffset.left < o.scrollSensitivity ) {
i.scrollParent[ 0 ].scrollLeft = scrolled = i.scrollParent[ 0 ].scrollLeft - o.scrollSpeed;
scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft - o.scrollSpeed;
}
}

0 comments on commit bbf9ea0

Please sign in to comment.
You can’t perform that action at this time.