水平スクロールタッチメニュー？

Question

私はモバイルウェブサイトを構築しており、クライアントは上部にメニューバーが必要です。メニューは非常に幅が広​​いので、左右にドラッグすることで水平方向にスクロールすることができます。 app.ft.comには同様の機能があります（ただし、iPhoneでこれを表示する必要がありますが、これをiPhone上で表示する必要があります）

これを達成できるjQuery/jqTouchスクリプトを知っている人はいますか？私はscrollTouchを試してみましたが、それはメニューだけでなくページ全体をスクロールします。

Answer 1

この

http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

Answer 2

を見て私は、あなたはそれがモバイルデバイス上で左または右にドラッグしてスクロールすることができることはjQuery Mobileのイメージを持つシンプルな水平ナビゲーションバーを書きました。この例は非常に原油ですが、それはあなたに一般的な考えを与えるでしょう。マークアップは以下の通りです：

CSS：

<style type="text/css"> 
#navBar 
{ 
    white-space: nowrap; 
    height: 55px; 
    width: 100%; 
    position: relative; 
} 
</style> 

HTMLマークアップ：

<div id="navBar"> 
    <div style="left: 0%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav1" /> 
     <br /> 
     <span style="font-size: 80%">Nav1</span> 
    </div> 
    <div style="left: 40%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav2" /> 
     <br /> 
     <span style="font-size: 80%">Nav2</span> 
    </div> 
    <div style="left: 80%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav3" /> 
     <br /> 
     <span style="font-size: 80%">Nav3</span> 
    </div> 
    <div style="left: 120%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav4" /> 
     <br /> 
     <span style="font-size: 80%">Nav4</span> 
    </div> 
    <div style="left: 160%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav5" /> 
     <br /> 
     <span style="font-size: 80%">Nav5</span> 
    </div> 
    <div style="left: 200%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;"> 
     <img src="image.png" alt="Nav6" /> 
     <br /> 
     <span style="font-size: 80%">Nav6</span> 
    </div> 
</div> 

はJavaScript：

<script type="text/javascript" language="javascript"> 
    var bMouseDown = false; 
    var bMouseUp = true; 
    var iStartPixelsX = 0; 
    var iCurrentNavbarPixelsX = 0; 
    var changePixels = 0; 
    var leftMostOffsetPixels = 0; 

    function funcMoveNavBar(pixels) { 
     $("#navBar").attr("style", "left: " + pixels + "px;"); 
    } 

    var onOrientationChange = function() { 
     setTimeout(function() { 
      funcMoveNavBar(0); 
      iStartPixelsX = 0; 
      iCurrentNavbarPixelsX = 0; 
      changePixels = 0; 
      leftMostOffsetPixels = $("#navBar div").last().offset().left + $("#navBar div").last().width(); 
     }, 500); 
    } 

    $(document).ready(function() { 
     leftMostOffsetPixels = $("#navBar div").last().offset().left + $("#navBar div").last().width(); 

     if (window.addEventListener) { 
      window.addEventListener("orientationchange", onOrientationChange, false); 
     } else if (window.attachEvent) { 
      window.attachEvent("onorientationchange", onOrientationChange); 
     } 

     $("#navBar").bind("vmousedown", function (e) { 
      bMouseDown = true; 
      bMouseUp = false; 

      iStartPixelsX = e.pageX; 
     }); 

     $("#navBar").bind("vmousemove", function (e) { 
      if (bMouseDown && !bMouseUp) { 
       e.preventDefault(); 
       changePixels = (e.pageX - iStartPixelsX) + iCurrentNavbarPixelsX; 

       funcMoveNavBar(changePixels); 
      } 
     }); 

     $("#navBar").bind("vmouseup", function (e) { 
      bMouseUp = true; 
      bMouseDown = false; 

      if (changePixels > 0) { 
       funcMoveNavBar(0); 
       changePixels = 0; 
       iCurrentNavbarPixelsX = 0; 
      } else if (($("#navBar div").last().offset().left + $("#navBar div").last().width()) < $("#navBar").width()) { 
       funcMoveNavBar($("#navBar").width() - leftMostOffsetPixels); 
       iCurrentNavbarPixelsX = $("#navBar").width() - leftMostOffsetPixels; 
       changePixels = $("#navBar").width() - leftMostOffsetPixels; 
      } else { 
       iCurrentNavbarPixelsX = changePixels; 
      } 
     }); 
    }); 
</script> 

$（ドキュメント）.ready（）があることに注意してくださいjQuery MobileでAJAXナビゲーションが有効になっている場合はお勧めできませんので、このソリューションを自分のニーズに合わせて調整する必要があります。

Answer 3

お試しiScroll 4 by cubiq.orgこれはページ、水平、垂直、または両方のスクロールするdivに適用でき、素敵なアニメーション（スマートフォンのような）を持ち、WebkitやFirefox（他のものは悪化しています）で非常に高速です。私はそのようなスクローラーを探して12時間を費やしており、これは基本的に私の必要性をすべてカバーしています。

Answer 4

モバイルブラウザがスクロールバーを作成しないという事実を利用したCSSのみのソリューションです。内部の視覚的なガイダンスと自動幅のいくつかの種類は良いだろうが、必ずしも必要ではありません。

#outer { 
    width: 100%; 
    overflow: auto; 
} 

#inner { 
    width: 800px; 
} 

HTML：リンクの

<div id="outer"> 
    <div id="inner"> 
     content1 content2 content3 content4 content5 content6 content7 content8 content9 content10 content11 content12 
    </div> 
</div>