iOS8 webkit-overflow-scrolling:touch with overlay
iOS8 webkit-overflow-scrolling:touch with overlay
我目前有一个带有 UIWebView 的应用程序,它有一个可滚动的 div 和 webkit-overflow-scrolling:touch 属性。
当侧边菜单打开时,我在内容之上放置了一个叠加层(另一个 div)以提供调暗效果。
问题是,当用户平移菜单打开(并且覆盖就位)时,可滚动 div 实际上在覆盖应该停止这种形式发生时滚动。
现在,在 iOS7 中,解决方案是添加 webkit-overflow-scrolling:touch;到叠加层。这就像一个魅力,但在 iOS8 中却没有。
这里有一个link问题的例子。如果 运行 on iOS 7 它按预期工作,如果 运行 on iOS 8 后面的内容将滚动。
.scrollable {
width:100%;
height:200px;
-webkit-overflow-scrolling:touch;
overflow:scroll;
}
.overlay {
position:absolute;
width:100%;
overflow:scroll;
height:200px;
-webkit-overflow-scrolling:touch;
background-color:black;
opacity:.5;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
z-index:10;
}
https://jsfiddle.net/SergioM/57f2da87/9/
我还尝试在打开菜单时将可滚动 div 的 overflow-x 属性 设置为 hidden/auto,但这增加了可怕的闪烁。
任何建议将不胜感激。
谢谢。
我认为仅在 iOS8 的当前 safari/webkit-version 中使用 css 是不可能的。
但是您应该可以使用 javascript 来防止滚动。
$( ".showHide" ).click( function() {
$( ".overlay" ).toggle();
});
$( ".overlay" ).on( 'touchstart touchmove', function( event ) {
if ( $( this ).is( ":visible" ) ) {
event.preventDefault();
}
});
更新:
我试了一下,想出了另一个可能对你有帮助的解决方案。
HTML:
<button class="showHide">show/hide overlay</button>
<br/>
<br/>
<div class="scrollable">
<div class="overlay"></div>
1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>11
<br/>12
<br/>13
<br/>14
<br/>15
<br/>16
<br/>17
</div>
CSS:
.scrollable {
width:100%;
height:200px;
-webkit-overflow-scrolling:touch;
overflow:scroll;
position: relative
}
.overlay {
content: ' ';
position:absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background-color:black;
opacity:.5;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transition: opacity 300ms ease;
z-index:10;
}
Javascript:
$( ".showHide" ).click( function () {
$( ".overlay" ).toggle( { duration: 0, complete: function() {
if ( $( ".overlay" ).is( ":visible" ) ) {
$( ".overlay" ).css( 'top', $( ".scrollable" ).scrollTop() );
$( ".scrollable" ).css( 'overflow', 'hidden' );
} else {
$( ".scrollable" ).css( 'overflow', 'scroll' );
}
}});
});
示例:JSFiddle
好吧,在尝试了许多不同的选择之后,我想出了一个目前已经足够好的解决方法。
我在叠加层内添加了一个 div,它在垂直方向上大了 1%。现在保证事件由覆盖层处理,而不是传递给后面的容器。
这也让我可以在本地收听事件,例如平移(水平),垂直事件不会出现,但现在没问题。
.overlayInner {
color:red;
height:101%;
margin-left:30px;
}
这里有一个link到fiddle.The的边距是不必要的,只是为了避免数字重叠。
我目前有一个带有 UIWebView 的应用程序,它有一个可滚动的 div 和 webkit-overflow-scrolling:touch 属性。 当侧边菜单打开时,我在内容之上放置了一个叠加层(另一个 div)以提供调暗效果。
问题是,当用户平移菜单打开(并且覆盖就位)时,可滚动 div 实际上在覆盖应该停止这种形式发生时滚动。
现在,在 iOS7 中,解决方案是添加 webkit-overflow-scrolling:touch;到叠加层。这就像一个魅力,但在 iOS8 中却没有。
这里有一个link问题的例子。如果 运行 on iOS 7 它按预期工作,如果 运行 on iOS 8 后面的内容将滚动。
.scrollable {
width:100%;
height:200px;
-webkit-overflow-scrolling:touch;
overflow:scroll;
}
.overlay {
position:absolute;
width:100%;
overflow:scroll;
height:200px;
-webkit-overflow-scrolling:touch;
background-color:black;
opacity:.5;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
z-index:10;
}
https://jsfiddle.net/SergioM/57f2da87/9/
我还尝试在打开菜单时将可滚动 div 的 overflow-x 属性 设置为 hidden/auto,但这增加了可怕的闪烁。
任何建议将不胜感激。
谢谢。
我认为仅在 iOS8 的当前 safari/webkit-version 中使用 css 是不可能的。
但是您应该可以使用 javascript 来防止滚动。
$( ".showHide" ).click( function() {
$( ".overlay" ).toggle();
});
$( ".overlay" ).on( 'touchstart touchmove', function( event ) {
if ( $( this ).is( ":visible" ) ) {
event.preventDefault();
}
});
更新:
我试了一下,想出了另一个可能对你有帮助的解决方案。
HTML:
<button class="showHide">show/hide overlay</button>
<br/>
<br/>
<div class="scrollable">
<div class="overlay"></div>
1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>11
<br/>12
<br/>13
<br/>14
<br/>15
<br/>16
<br/>17
</div>
CSS:
.scrollable {
width:100%;
height:200px;
-webkit-overflow-scrolling:touch;
overflow:scroll;
position: relative
}
.overlay {
content: ' ';
position:absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background-color:black;
opacity:.5;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transition: opacity 300ms ease;
z-index:10;
}
Javascript:
$( ".showHide" ).click( function () {
$( ".overlay" ).toggle( { duration: 0, complete: function() {
if ( $( ".overlay" ).is( ":visible" ) ) {
$( ".overlay" ).css( 'top', $( ".scrollable" ).scrollTop() );
$( ".scrollable" ).css( 'overflow', 'hidden' );
} else {
$( ".scrollable" ).css( 'overflow', 'scroll' );
}
}});
});
示例:JSFiddle
好吧,在尝试了许多不同的选择之后,我想出了一个目前已经足够好的解决方法。
我在叠加层内添加了一个 div,它在垂直方向上大了 1%。现在保证事件由覆盖层处理,而不是传递给后面的容器。 这也让我可以在本地收听事件,例如平移(水平),垂直事件不会出现,但现在没问题。
.overlayInner {
color:red;
height:101%;
margin-left:30px;
}
这里有一个link到fiddle.The的边距是不必要的,只是为了避免数字重叠。