iOS Webアプリでラバーバンドを無効にする方法は？
この：
$('body').on('touchmove', function(e) { e.preventDefault(); });
機能しますが、ページ全体のスクロールが無効になるため、理想的とは言えません。
この：
$('*').on('touchstart', function(e){
var element = $(this).get(0);
if ( element.scrollTop <= 0 ) element.scrollTop = 1;
if ( element.scrollTop + element.offsetHeight >= element.scrollHeight ) element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
});
スクロール領域があるページで機能します。ただし、スクロールするものがない場合は、再びラバーバンドが表示されます。
だから私の質問：
ラバーバンド効果を無効にし、-webkit-overflow-scrollingスクロール可能な領域？
[更新]
最良の解決策
タブバーやナビゲーションバーなど、スクロールできないすべての要素のスクロールを無効にします。
anElement.addEventListener('touchmove', function( event ){ event.preventDefault() };
メインコンテンツなどのスクロール可能な要素にスクロールハンドラーをアタッチします。
anElement.addEventListener('touchstart', function( event ){
if( this.scrollTop === 0 ) {
this.scrollTop += 1;
} else if( this.scrollTop + this.offsetHeight >= this.scrollHeight ) {
this.scrollTop -= 1;
}
}
<body>のラバーバンディングがエクスペリエンスを損なうSPAで最近同じ問題に遭遇しましたが、サブエリアでのスクロールが必要でした。方法1が最も効果的だったので、dSquaredの提案に感謝します。これは、ツリーの全体を調べて.scrollクラスを持つ要素（divだけでなく）を見つける作業用のプロジェクトに実装したという彼の提案の私の小さな拡張です：
// Prevent rubber-banding of the body, but allow for scrolling elements
$('body').on('touchmove', function (e) {
var searchTerms = '.scroll, .scroll-y, .scroll-x',
$target = $(e.target),
parents = $target.parents(searchTerms);
if (parents.length || $target.hasClass(searchTerms)) {
// ignore as we want the scroll to happen
// (This is where we may need to check if at limit)
} else {
e.preventDefault();
}
});
そして、CSSは次のようになります。
body {
height: 100%;
overflow: hidden;
}
.scroll, .scroll-y, .scroll-x {
-webkit-overflow-scrolling: touch;
}
.scroll > *, .scroll-y > *, .scroll-x > * {
-webkit-transform : translateZ(0);
}
.scroll { overflow: auto; }
.scroll-y { overflow-y: auto; }
.scroll-x { overflow-x: auto; }
必要なライブラリは1つ（jQueryまたは Zepto ）だけで、本体にラバーバンディングのない勢いのあるネイティブスクロールが得られます。また、translateZを追加して、スクロール中に要素が非表示になるという問題を修正しました。これを使用して GPUで要素を加速する を使用できます。
しかし（これは大きいですが）、dSquaredが指摘しているように、スクロール要素が限界に達し、さらにスクロールしようとすると、ページ全体がラバーバンドになります。個人的には、私はこれを失敗だと考えているので、私はそれについて作業を続けていますが、これを理解しようと試みました。 OPのコードの行に沿ってチェックを追加することが答えになるかもしれませんが、私は試していません。
アップデート（10/7/12）：
多くの作業の後、次のコードはiOS6で完全に機能します（他では何もテストしていません）。本体にラバーバンディングがなく、スクロール領域の制限で問題が発生せず、全体にネイティブのスクロールパフォーマンスがあります。これは明らかに元々より多くのコードですが、これはOPの目標に最も近い動作を提供すると思います。
(function registerScrolling($) {
var prevTouchPosition = {},
scrollYClass = 'scroll-y',
scrollXClass = 'scroll-x',
searchTerms = '.' + scrollYClass + ', .' + scrollXClass;
$('body').on('touchstart', function (e) {
var $scroll = $(e.target).closest(searchTerms),
targetTouch = e.originalEvent.targetTouches[0];
// Store previous touch position if within a scroll element
prevTouchPosition = $scroll.length ? { x: targetTouch.pageX, y: targetTouch.pageY } : {};
});
$('body').on('touchmove', function (e) {
var $scroll = $(e.target).closest(searchTerms),
targetTouch = e.originalEvent.targetTouches[0];
if (prevTouchPosition && $scroll.length) {
// Set move helper and update previous touch position
var move = {
x: targetTouch.pageX - prevTouchPosition.x,
y: targetTouch.pageY - prevTouchPosition.y
};
prevTouchPosition = { x: targetTouch.pageX, y: targetTouch.pageY };
// Check for scroll-y or scroll-x classes
if ($scroll.hasClass(scrollYClass)) {
var scrollHeight = $scroll[0].scrollHeight,
outerHeight = $scroll.outerHeight(),
atUpperLimit = ($scroll.scrollTop() === 0),
atLowerLimit = (scrollHeight - $scroll.scrollTop() === outerHeight);
if (scrollHeight > outerHeight) {
// If at either limit move 1px away to allow normal scroll behavior on future moves,
// but stop propagation on this move to remove limit behavior bubbling up to body
if (move.y > 0 && atUpperLimit) {
$scroll.scrollTop(1);
e.stopPropagation();
} else if (move.y < 0 && atLowerLimit) {
$scroll.scrollTop($scroll.scrollTop() - 1);
e.stopPropagation();
}
// If only moving right or left, prevent bad scroll.
if(Math.abs(move.x) > 0 && Math.abs(move.y) < 3){
e.preventDefault()
}
// Normal scrolling behavior passes through
} else {
// No scrolling / adjustment when there is nothing to scroll
e.preventDefault();
}
} else if ($scroll.hasClass(scrollXClass)) {
var scrollWidth = $scroll[0].scrollWidth,
outerWidth = $scroll.outerWidth(),
atLeftLimit = $scroll.scrollLeft() === 0,
atRightLimit = scrollWidth - $scroll.scrollLeft() === outerWidth;
if (scrollWidth > outerWidth) {
if (move.x > 0 && atLeftLimit) {
$scroll.scrollLeft(1);
e.stopPropagation();
} else if (move.x < 0 && atRightLimit) {
$scroll.scrollLeft($scroll.scrollLeft() - 1);
e.stopPropagation();
}
// If only moving up or down, prevent bad scroll.
if(Math.abs(move.y) > 0 && Math.abs(move.x) < 3){
e.preventDefault();
}
// Normal scrolling behavior passes through
} else {
// No scrolling / adjustment when there is nothing to scroll
e.preventDefault();
}
}
} else {
// Prevent scrolling on non-scrolling elements
e.preventDefault();
}
});
})(jQuery);
残念ながら、Mobile Safariのラバーバンドスクロールはブラウザ自体に組み込まれている「機能」であるため、これに対する「特効薬」の修正はありません。ブラウザーが提供するデフォルトのスクロールメカニズムを使用すると、ある程度はラバーバンドスクロールになります。
これに取り組むには、2つの方法があります。
方法1
</body>要素のtouchmoveイベントにバインドし、touchmoveイベントのターゲットをチェックして、イベントを発生させるかどうかを確認します。
HTML
<div class="scroll">
<p>...</p>
<p>...</p>
</div>
JS
$('body').on('touchmove', function(e) {
// this is the node the touchmove event fired on
// in this example it would be the </p> element
target = e.target;
// we need to find the parent container
// we get it like so; assumes div as parent
parent = $(e.target).closest('div');
// check if the parent is a scroll window by class //
if ($(parent).hasClass('scroll')){
// ignore as we want the scroll to happen
} else {
e.preventDefault();
}
});
このメソッドは、ブラウザのデフォルトのスクロールを使用しますが、スクロールの上部または下部でラバーバンドスクロールが発生するという欠点があります</div>。
方法2
以前のように</body>要素のtouchmoveイベントにバインドしますが、この場合はAlltouchmoveイベントと優れた iScroll 4 プラグインに依存して、以下のようにスクロールを処理します：
HTML
<div id="wrapper">
<div id="scroller">
<p>...</p>
<p>...</p>
</div>
</div>
JS
$(document).ready(function(){
// prevent all scroll //
$('body').on('touchmove', function(e) {
e.preventDefault();
});
// apply iscroll to scrolling element
// requires use of id
var newscroll = new iScroll('wrapper');
});
これは、すべてのラバーバンドスクロールをブロックし、Niceスクロール領域を提供するため、私の推奨方法ですが、プラグインの使用に依存しています。
これが役に立てば幸い
JQueryとHammer.js（jquery-implementation）を使用するソリューションを次に示します。これは2つのライブラリですが、モバイルで作業している場合は、とにかくHammerを含めたいと思うでしょう。
上にバブリングするすべてのドラッグイベント（したがって、非スクロールドラッグインタラクションはstopPropagationを使用できます）について、ハンドラーは、class = scrollingを使用して要素をバブリングするかどうかをチェックします。 scrollContainerを使用して、ネイティブスクロールを許可します。
$("body").hammer().on('drag swipe', function(e){
var scrollTarget = $(e.gesture.target).closest(".scrollable");
if(scrollTarget.length)
{
var scrollTopMax = scrollTarget[0].scrollHeight - scrollTarget.outerHeight();
if(scrollTopMax > 0){
var scrollTop = scrollTarget.scrollTop();
if(scrollTop > 0 && scrollTop < scrollTopMax){
//console.log("scrolling in the middle");
}
else if(scrollTop <= 0 && e.gesture.deltaY < 0){
//console.log("scrolling from top");
}
else if(scrollTop >= scrollTopMax && e.gesture.deltaY > 0){
//console.log("scrolling from bottom");
}
else{
//console.log("trying to scroll out of boundaries");
e.gesture.preventDefault();
}
}
else{
//console.log("content to short to scroll");
e.gesture.preventDefault();
}
}
else{
//console.log("no containing element with class=scrollable");
e.gesture.preventDefault();
}
});
ピンチなどでドラッグを殺す;必要に応じてエスケープし、ビューがユーザースケーラブルな場合はズームを許可します
$("body").hammer().on('doubletap rotate pinch', function(e){
e.gesture.preventDefault();
});
Ios7/safari、Android4.3/webview、Android4.3/firefoxMobile25でテストされ、壊れなかった唯一のソリューションです。
@Markの答えに基づいて、私たちはこの代替案を考え出しましたが、これはうまくいくようです。置換.page_listスクロール可能なアイテムのクラス名。
var INITIAL_Y = 0; // Tracks initial Y position, needed to kill Safari bounce effect
function kill_safari_bounce() {
$( document ).on( 'touchstart', function( e ){
INITIAL_Y = e.originalEvent.touches[0].clientY;
});
$( document ).on( 'touchmove', function( e ) {
// Get scrollable ancestor if one exists
var scrollable_ancestor = $( e.target ).closest( '.page_list' )[0];
// Nothing scrollable? Block move.
if ( !scrollable_ancestor ) {
e.preventDefault();
return;
}
// If here, prevent move if at scrollable boundaries.
var scroll_delta = INITIAL_Y - e.originalEvent.touches[0].clientY;
var scroll_pos = scrollable_ancestor.scrollTop;
var at_bottom = (scroll_pos + $(scrollable_ancestor).height()) == scrollable_ancestor.scrollHeight;
if ( (scroll_delta < 0 && scroll_pos == 0) ||
(scroll_delta > 0 && at_bottom) ){
e.preventDefault();
}
});
}
私の意見では、この問題の最善の解決策を書いています。要素にyスクロールがない限り、通常はスクロールを無効にします。
/********************************************************************************
* Disable rubber band (c)2013 - Mark van Wijnen | www.CrystalMinds.nl
********************************************************************************/
$(function(){
var scrollY = 0;
$(document).on('touchstart', function( e ){
scrollY = e.originalEvent.touches.item(0).clientY;
});
$(document).on('touchmove', function( e ){
var scrollPos = e.target.scrollTop;
var scrollDelta = scrollY - e.originalEvent.touches.item(0).clientY;
var scrollBottom = scrollPos + $(e.target).height();
scrollY = e.originalEvent.touches.item(0).clientY;
if ( $(e.target).css( 'overflow-y' ) != 'scroll' || ( scrollDelta < 0 && scrollPos == 0 ) || ( scrollDelta > 0 && scrollBottom == e.target.scrollHeight ) )
e.preventDefault();
});
});
最後に、いくつかの方法を混合しましたが、これらのコードは作業バージョンです。ただし、 hammer.js を含める必要があります
CSS
.scrollable{
overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
*{-webkit-transform:translate3d(0,0,0);}
}
ジャバスクリプト
$(document).on("touchmove",function(e){
e.preventDefault();
});
$("body").on("touchstart",".scrollable",function(e){
if(e.currentTarget.scrollTop===0){
e.currentTarget.scrollTop = 1;
}else if(e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight){
e.currentTarget.scrollTop-=1;
}
});
$("body").on("touchmove",".scrollable",function(e){
e.stopPropagation();
});
$("body").hammer().on("pinch",function(e){
e.gesture.preventDefault();
});
誰かが体に固定された位置を使用することを検討したことがありますか？それは素晴らしい、シンプルでネイティブなソリューションです。 JavaScriptは必要ありません。
body{
position: fixed;
}