luci-base: ui.js: improve mobile dropdown scroll behaviour
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
parent
81693ff2c8
commit
0fb2f8f1d1
1 changed files with 27 additions and 4 deletions
|
@ -619,8 +619,6 @@ var UIDropdown = UIElement.extend({
|
|||
if ('ontouchstart' in window) {
|
||||
var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
|
||||
vpHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
|
||||
scrollFrom = window.pageYOffset,
|
||||
scrollTo = scrollFrom + rect.top - vpHeight * 0.5,
|
||||
start = null;
|
||||
|
||||
ul.style.top = sb.offsetHeight + 'px';
|
||||
|
@ -629,6 +627,31 @@ var UIDropdown = UIElement.extend({
|
|||
ul.style.maxHeight = (vpHeight * 0.5) + 'px';
|
||||
ul.style.WebkitOverflowScrolling = 'touch';
|
||||
|
||||
function getScrollParent(element) {
|
||||
var parent = element,
|
||||
style = getComputedStyle(element),
|
||||
excludeStaticParent = (style.position === 'absolute');
|
||||
|
||||
if (style.position === 'fixed')
|
||||
return document.body;
|
||||
|
||||
while ((parent = parent.parentElement) != null) {
|
||||
style = getComputedStyle(parent);
|
||||
|
||||
if (excludeStaticParent && style.position === 'static')
|
||||
continue;
|
||||
|
||||
if (/(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX))
|
||||
return parent;
|
||||
}
|
||||
|
||||
return document.body;
|
||||
}
|
||||
|
||||
var scrollParent = getScrollParent(sb),
|
||||
scrollFrom = scrollParent.scrollTop,
|
||||
scrollTo = scrollFrom + rect.top - vpHeight * 0.5;
|
||||
|
||||
var scrollStep = function(timestamp) {
|
||||
if (!start) {
|
||||
start = timestamp;
|
||||
|
@ -637,11 +660,11 @@ var UIDropdown = UIElement.extend({
|
|||
|
||||
var duration = Math.max(timestamp - start, 1);
|
||||
if (duration < 100) {
|
||||
document.body.scrollTop = scrollFrom + (scrollTo - scrollFrom) * (duration / 100);
|
||||
scrollParent.scrollTop = scrollFrom + (scrollTo - scrollFrom) * (duration / 100);
|
||||
window.requestAnimationFrame(scrollStep);
|
||||
}
|
||||
else {
|
||||
document.body.scrollTop = scrollTo;
|
||||
scrollParent.scrollTop = scrollTo;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue