私は、オーバーフローしたdivに慣性スクロールを与えるために、いくつかの場所で-webkit-overflow-scrolling:touch
を使用するWebアプリに取り組んでいます。
IOS8への更新以降、-webkit-overflow-scrolling: touch
を使用するとスクロールできなくなります。これまで修正できた唯一の方法は、-webkit-overflow-scrolling: touch
を削除して、標準のスティッキースクロールを残すことです。助けてください!
IOS5、6、および7で動作する標準クラスの1つの例を次に示します。
.dashboardScroll {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
-webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
}
IOS 5、6、および7ではうまくスクロールする(非常に複雑な)ネストされたスクロール可能なdivで同様の問題がありましたが、iOS 8.1では断続的にスクロールできませんでした。
私が見つけた解決策は、ブラウザをだましてGPUを使用させるCSSをすべて削除することでした。
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
これにより、「-webkit-overflow-scrolling:touch;」引き続き含めることができ、通常どおり機能します。
上記のハックがiOSの初期の化身で与えたスクロール性能に対する(私にとっては怪しい)利益を犠牲にすることを意味していましたが、それと慣性スクロールの選択では、慣性スクロールがより重要であるとみなされました(サポートしていません) iOS 5)。
この段階では、なぜこの対立が存在するのかを言うことはできません。これらの機能の実装が不適切である可能性がありますが、それを引き起こしているのはCSSの少し深い部分があると思われます。現在、HTML/CSS/JS構成を縮小して作成しようとしていますが、それを実現するには、重いマークアップ構造と大量の動的データが必要な場合があります。
補遺:ただし、この修正を行ってもユーザーがスクロールできない要素でスクロールしようとすると、停止してから1秒待つ必要があることをクライアントに指摘する必要がありましたスクロール可能な要素をスクロールできます。これはネイティブの動作です。
この問題があり、解決策を見つけました。解決策は、ex :(。dashboardScroll> .dashboardScroll-inner)の2つのコンテナーにコンテンツを配置し、このcss3を介して親コンテナー「.dashboardScroll」よりも1px以上内側のコンテナー「.dashboardScroll-inner」を指定する必要があることです。財産
.dashboardScroll-inner { height: calc(100% + 1px);}
これをチェックしてください:
http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/
または、別のコンテナを追加できない場合は、これを使用します:
.dashboardScroll:after { height: calc(100% + 1px);}
Cordova Webアプリでも同じ問題が発生しました。私にとって問題は、アニメーション化され、プロパティ<div>
を持った親animation-fill-mode: forwards;
を持っていたことです
このプロパティを削除することで問題が解決し、壊れたオーバーフロースクロールが修正されました。
DOMをバブリングする周囲の要素からのタッチイベントを防ぐことは、別の潜在的な解決策です。周囲のDIV要素がタッチまたはドラッグイベントを受け取ると、スクロールが停止することがあります。この特定の問題は、スムーズにスクロールする必要があるメニューで発生しました。これらのイベントをオフにすると、スクロール可能な要素の「固着」を止めることができました。
$html.bind('touchmove', scrollLock );
var scrollLock = function(e) {
if( $body.hasClass('menu-open') ){
e.stopPropagation();
e.preventDefault();
}
};
$html.unbind('touchmove', scrollLock );
以前の回答では問題を解決できませんでした。そのため、数時間後、iScrollライブラリに iScroll が試されました。 iOSだけにスクロールを追加するための追加のライブラリ(およびかなり大きい)を含めることは素晴らしいことではありませんが、これは私にとってはうまくいったことです。 READMEに従うだけで、Liteバージョンで十分です。
短所:
使用するかどうかはわかりませんが、必要な場合は試してみてください。
ここですべてのソリューションを試してみましたが、成功しませんでした。スクロール可能なdivおよび親コンテナでプロパティ-webkit-overflow-scrolling:touch;を使用することで、機能させることができました。
div.container {
-webkit-overflow-scrolling: touch;
}
div.container > div.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
私もそれでいくつかの問題を抱えていますが、わずかに異なるシナリオで。
Divには問題なく慣性があります。
私はあなたが見てみることができるシンプルなJSFiddleを持っています。
https://jsfiddle.net/SergioM/57f2da87/17/
.scrollable {
width:100%;
height:200px;
-webkit-overflow-scrolling:touch;
overflow:scroll;
}
それが役に立てば幸い。
Mohammed Suleimanの答え(.dashboardScroll:after {height:calc(100%+ 1px);})で最後のメソッドを使用しましたが、結果はコンテンツの下に100%+ 1pxの空きスペースがありました。 500ms後に高さを1pxに戻すことでこれを修正しました。 glyいですが、動作します。
これはreact.jsアプリであったため、私のコードは次のようになりました。
componentDidUpdate() {
if (window.navigator.standalone && /* test for iOS */) {
var self = this;
setTimeout(function(){
self.refs.style.innerHTML = "#content::after { height: 1px}";
}, 500);
}
}
そしてレンダリング:
render() {
var style = '';
if (window.navigator.standalone && /* test for iOS */) {
style = "#content::after { height: calc(100% + 1px)}";
}
return (<div>
<style type="text/css" ref="style">
{style}
</style>
<div id="content"></div>
</div>);
}
angular bootstrapモーダルの使用中にこの問題が発生しました。独自のスタイルシートを作成し、メディアクエリの固定幅とマージンを削除して修正しました。
元の:
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.modal-sm {
width: 300px;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
変更点:
.modal-dialog {
margin: 0px;
margin-top: 30px;
margin-left: 5%;
margin-right: 5%;
}
@media (min-width: 768px) {
.modal-dialog {
width: auto;
margin-left: 10%;
margin-right: 10%;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 992px) {
.modal-dialog {
width: auto;
margin-left: 15%;
margin-right: 15%;
}
}