library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Position: Fix scrollbar calculcation to correctly take overflow:scroll into account, along with unit tests

Browse Source
This commit is contained in:
Jörn Zaefferer 2012-04-24 17:23:25 +02:00
parent 1a0f2e4659
commit 252352e124
4 changed files with 69 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/position/position.html
View File

@ -43,7 +43,7 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6
<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
<div id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px;"></div>
<div style="position: absolute; top: 0px; left: 0px">
<div id="scrollx" style="position: absolute; top: 0px; left: 0px">
<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
</div>

61
tests/unit/position/position_core.js
View File

@ -591,6 +591,67 @@ test( "within", function() {
}, "flipfit - left top" );
});
test( "with scrollbars", function() {
expect( 4 );
$( "#scrollx" ).css({
width: 100,
height: 100,
left: 0,
top: 0
});
collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90,
left: 90
}, "visible" );
$( "#scrollx" ).css({
overflow: "scroll"
});
var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) );
collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90 - scrollbarInfo.height,
left: 90 - scrollbarInfo.width
}, "scroll" );
$( "#scrollx" ).css({
overflow: "auto"
});
collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90,
left: 90
}, "auto, no scroll" );
$( "#scrollx" ).css({
overflow: "auto"
}).append( $("<div>").height(300).width(300) );
collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90 - scrollbarInfo.height,
left: 90 - scrollbarInfo.width
}, "auto, with scroll" );
});
test( "fractions", function() {
expect( 1 );

2
tests/visual/position/position_within.html
View File

@ -97,7 +97,7 @@
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
});
}
$( ".demo" ).append("<div style='width:5000px;height:5000px;' />").css("overflow","auto");
$( ".demo" ).css("overflow","scroll");
$( ".positionable" ).css( "opacity", 0.5 );

11
ui/jquery.ui.position.js vendored
View File

@ -58,12 +58,13 @@ $.position = {
getScrollInfo: function( within ) {
var overflowX = within.isWindow ? "" : within.element.css( "overflow-x" ),
overflowY = within.isWindow ? "" : within.element.css( "overflow-y" ),
scrollbarWidth = overflowX === "auto" || overflowX === "scroll" ? $.position.scrollbarWidth() : 0,
scrollbarHeight = overflowY === "auto" || overflowY === "scroll" ? $.position.scrollbarWidth() : 0;
hasOverflowX = overflowX === "scroll" ||
( overflowX === "auto" && within.width < within.element[0].scrollWidth ),
hasOverflowY = overflowY === "scroll" ||
( overflowY === "auto" && within.height < within.element[0].scrollHeight );
return {
height: within.height < within.element[0].scrollHeight ? scrollbarHeight : 0,
width: within.width < within.element[0].scrollWidth ? scrollbarWidth : 0
width: hasOverflowX ? $.position.scrollbarWidth() : 0,
height: hasOverflowY ? $.position.scrollbarWidth() : 0
};
},
getWithinInfo: function( element ) {