From bbf9ea0942622a40d1adafeaed7045e0cf6ff8fd Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 9 Aug 2014 23:11:16 -0400 Subject: [PATCH] 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. --- tests/unit/draggable/draggable_options.js | 14 ++++++++++++++ ui/draggable.js | 23 ++++++++++++++--------- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js index a94452d9a..99fd608bf 100644 --- a/tests/unit/draggable/draggable_options.js +++ b/tests/unit/draggable/draggable_options.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 ); diff --git a/ui/draggable.js b/ui/draggable.js index 2f91f2ea2..a6de2889c 100644 --- a/ui/draggable.js +++ b/ui/draggable.js @@ -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; } } -- 2.39.5