6

以前にも同様の問題が発生し、回避策を実際に理解できなかったため、iScrollなどのプラグインに依存することになりました。これは非常に単純なタスクなので、プラグインを含めることを拒否します。私が欲しいのは、iOSで水平スクロールを防ぐことです。これには、ページ上にある可能性があるが表示されていないコンテンツのラバーバンド効果が含まれます。

私が理解していることから、最初にラバーバンドを完全に無効にしてから、タッチスクロールをコンテナ要素（IDに「touch」を付けました）に適用する必要があります。これが正しいアプローチかどうかわかりませんか？

$(document).bind('touchmove', function(e) {
  if (!e.target == '#touch') {
    e.preventDefault();
  }
});

#touchのスタイル

-webkit-overflow-scrolling: touch;
overflow: hidden;
height: 100%;
@media only screen and (max-width: 768px) {
  width: 768px;
}

これにより、水平方向の幅が728ピクセルのままになるのを防ぐことはできませんが、ユーザーはスクロールして非表示のコンテンツを表示できます。アイデア？

4

4 に答える 4

14

さて、上記のメタはそれ自体が便利です：

<meta content="yes" name="apple-mobile-web-app-capable" />
 <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />

これにより、ユーザーが画面を回転させたときに発生するSafariのバグを防ぐことができます。ただし、目的の機能を実現するための最も適切な方法は次のとおりです。

  • オーバーフローを非表示にした親divを使用し、このdivの高さがビューポートに応じて制限されていることと、overflow：autoまたはcss 3overflow-y：scrollを使用した子divを使用してください。したがって、基本的に、子div内のコンテンツのサイズが子のデフォルトのサイズを超える場合は、垂直方向/水平方向にスクロールできます。親がoverflow：hiddenを持っているため、子の外側のコンテンツは表示されないため、適切なスクロール効果が得られます。**また、overflow：hiddenを使用し、すべてのtouchEventのデフォルトを防止する場合、スクロールや奇妙なブラウザの動作はありません**

  • JavaScriptを使用して、DOM内のすべての要素がビューポートに従ってスケーリングされていることを確認し、できるだけ多くの要素に静的サイズを使用しないようにします。

  • touchStart、touchMove、およびtouchEndイベントをバインドします。touchMoveイベントもリッスンされない限り、Safariは常にtouchEndイベントを発生させるとは限りません。単なるプレースホルダーであっても、Safariでの一貫性のない動作を避けるために、そこに配置してください。

  • 水平方向のスライドは2つの方法で可能です。スライドの方向を検出した後に同じdivに新しいコンテンツを読み込むか、その子divにすべての要素を入力すると、親の内側の子のマージン/位置を実際に次のようにシフトできます。 'スクロール'。アニメーションは、より滑らかなインターフェイスに使用できます。

  • タッチイベントリスナーをバインドします。使用しているライブラリやイベント管理システムはわかりませんが、関係ありません。それぞれのタスクに対してそれぞれの関数を呼び出すだけです。

  • スライドの方向（左/右）を取得します。
var slideBeginX; 
function touchStart(event){event.preventDefault();//always prevent default Safari actions
    slideBeginX = event.targetTouches[0].pageX;
};

function touchMove(event) {
event.preventDefault();
// whatever you want to add here
};

function touchEnd(event) {
event.preventDefault();
var slideEndX = event.changedTouches[0].pageX;

// Now add a minimum slide distance so that the links on the page are still clickable
if (Math.abs(slideEndX - slideBeginX) > 200) {
if (slideEndX - slideBeginX > 0) {
// It means the user has scrolled from left to right
} else {
// It means the user has scrolled from right to left.
};
};
};
于 2012-10-20T20:43:21.600 に答える
2

これは、Android、iPhone、iPadで動作します。

<!doctype html>
<html>
    <head>
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />
        <title>Main</title>
    </head>
    <body>
...
    </body>
</html>
于 2012-10-20T02:18:28.857 に答える
2

次のリンクが役立つ場合があります。ここでは、垂直方向が無効で水平方向が有効になっています。目的に合わせてコードを少し調整する必要があります。

jquery-tools-touch-horizo​​ntal-only-disable-vertical-touch

垂直方向のスライドが気にならない場合は、次のコードも試すことができます-

document.ontouchmove = function(e){
     e.preventDefault();
}

それが役に立てば幸い。

于 2012-10-20T23:09:33.093 に答える
0

メタを使用しない場合は、常にラバーバンド効果が得られます。

<meta name="viewport" content="width=device-width" />

ユーザーが正確にフィットしたページでも、ページを拡大できるはずの幅よりも広く拡大できる場合でも、これを防ぐにはビューポートを使用する必要があります。他に方法はありません...

于 2012-10-19T01:11:40.530 に答える