隱藏的水平滾動條不工作jQuery移動

http://jsbin.com/UREQUbu/1/edit 隱藏的水平滾動條不工作jQuery移動

我在我的頭中有9個按鈕。我得到了水平滾動條的工作，但我想隱藏它，但仍然可以滾動。我發現一個JQuery plugin，適用於在我的筆記本電腦上滾動，但在移動設備上無法使用。

任何關於如何解決這個問題的幫助是非常感謝。

HTML

<!DOCTYPE html> 
<html> 

    <head> 
     <title>JS Bin</title> 
     <meta charset='utf-8'> 
     <meta content='yes' name='apple-mobile-web-app-capable'> 
     <meta content='default' name='apple-mobile-web-app-status-bar-style'> 
     <meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' 
     name='viewport'> 
     <link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'> 
     <script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script> 
     <script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' 
     type='text/javascript'></script> 
     <script src="http://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script> 
    </head> 

    <body> 
     <div data-role='page'> 
      <div class="header ui-bar-c" id="head1" data-role='header'> 
       <div id="headbtns" class="ui-btn-left"> 
        <div> 
         <table> 
          <tr> 
           <td><a id="btn1" data-role="button" data-inline="true" data-mini="true">Button 1</a> 
           </td> 
           <td><a id="btn2" data-role="button" data-inline="true" data-mini="true">Button 2</a> 
           </td> 
           <td><a id="btn3" data-role="button" data-inline="true" data-mini="true">Button 3</a> 
           </td> 
           <td><a id="btn4" data-role="button" data-inline="true" data-mini="true">Button 4</a> 
           </td> 
           <td><a id="btn5" data-role="button" data-inline="true" data-mini="true">Button 5</a> 
           </td> 
           <td><a id="btn6" data-role="button" data-inline="true" data-mini="true">Button 6</a> 
           </td> 
           <td><a id="btn7" data-role="button" data-inline="true" data-mini="true">Button 7</a> 
           </td> 
           <td><a id="btn8" data-role="button" data-inline="true" data-mini="true">Button 8</a> 
           </td> 
           <td><a id="btn9" data-role="button" data-inline="true" data-mini="true">Button 9</a> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </div> 
        <h1 style="visibility:hidden;">Text Website Name</h1> 
    <a href="#menupanel" data-role="button" data-icon="bars" data-iconpos="notext" 
       data-inline="true" class="ui-btn-right">Bars</a> 

      </div> 
      <div class='content' data-role='content'>Sample text</div> 
     </div> 
    </body> 

</html>

CSS

#headbtns { 
    margin-top: -.25em; 
    display: inline-block; 
    width: 97%; 
    overflow-x: hidden; 
    overflow-y: hidden;} 

#headbtns div { 
    width: 100em; 
    overflow-x: hidden; 
    overflow-y: hidden;} 

#headbtns table { 
    width: 100%;}

JQuery的：

$(function() { 
    $("#headbtns").mousewheel(function (event, delta) { 
     this.scrollLeft -= (delta * 30); 
     event.preventDefault(); 
    }); 
});

來源

2013-08-31 Michael Schwartz

爲什麼你期望移動瀏覽器將觸發'mousewheel'事件時，有沒有鼠標也沒有一個輪子？ – Itay

我不是！我想用鼠標滾輪在我的筆記本電腦上滾動，但顯然它不適用於移動設備。我希望滾動條隱藏在桌面上，但仍然可以滾動，並且在移動設備上它默認情況下是不可見的。因此我的問題。 –

你有沒有看到我的答案？ – Itay

這是明智的採取一種迪菲租金方式。

請勿將該區域的overflow-x設爲hidden，而是隱藏其容器overflow。這樣它仍然會有一個滾動條（一個隱形之一），你可以繼續在手機上使用滑動手勢。

JS Bin Demo

#headbtns { 
    overflow-x: scroll; /* Changed */ 

#head1 { 
    overflow: hidden;  /* Added */ 
}

來源

2013-09-01 04:50:11 Itay

在真正的Android上測試。它的工作原理，但它顯示了一個小的水平滾動條（在PC上聯機） – Itay

我上個月賣了我的Android用於我使用的筆記本電腦。我使用Windroy測試了它，它工作正常。謝謝！現在我感到愚蠢lol –

@ mikethedj4正如我所說，在一個真正的Android上它顯示了一個小滾動條。無論如何，如果這個答案幫助你，請接受它。 – Itay

隱藏的水平滾動條不工作jQuery移動

回答

相關問題