我正在使用PhoneGap构建一个应用程序,当我从屏幕底部滑出菜单时,我想禁用背景中div的滚动;
通过将overflow从scroll更改为hidden,它可以使菜单滑动时生效,但这会导致屏幕闪烁。
有人知道如何规避在更改overflow属性时防止div闪烁的任何技巧吗?
通过将overflow从scroll更改为hidden,它可以使菜单滑动时生效,但这会导致屏幕闪烁。
有人知道如何规避在更改overflow属性时防止div闪烁的任何技巧吗?
这在应用的所有转换或使用GPU时都可见。
无论如何,您可以尝试删除/减少元素的复杂性,或者参考此处的解决方案:
选项1
<meta name="viewport" content="width=device-width, user-scalable=no" />
Option 2 this:
.ui-page {
-webkit-backface-visibility: hidden;
}
Option 3 this:
.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.ui-header {
position:fixed;
z-index:10;
top:0;
width:100%;
padding: 13px 0;
height: 15px;
}
.ui-content {
padding-top: 57px;
padding-bottom: 54px;
overflow: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.ui-footer {
position:fixed;
z-index:10;
bottom:0;
width:100%;
}
'-webkit-transition': 'none !important',
'-moz-transition': 'none !important',
'-o-transition': 'none !important',
'-ms-transition': 'none !important',
'transition': 'none !important'
function disableScroll () {
$(element).on('touchmove', function(event){
event.preventDefault();
});
},
function enableScroll () {
$(element).off('touchmove');
}
-webkit-backface-visibility: hidden;
的方案有效,但是如果页面上有多个滚动条,似乎会引起性能问题。在旧版ipad上的Safari触及CPU限制并导致浏览器崩溃。.touchslide {
-webkit-overflow-scrolling:touch;
}
(使用类似jQuery的伪代码) 当你离开页面时,移除该类
selector.removeClass("touchslide");
页面加载后:
selector.addClass("touchslide");
selector.scrollLeft(0);