1

我有一个带有滚动部分的移动网页（Html5 + javacsript）。滚动（通过触摸移动屏幕）在横向模式下专注于按钮，但在纵向模式下不起作用。但是，如果我将网页保持在横向模式并将移动设备设备转为纵向，则滚动聚焦效果很好。

我使用 iscroll.js 文件（ISCROLL 4 JAVASCRIPT API FILE）来创建滚动视图。

<!DOCTYPE html>
 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <style type="text/css" media="all">
           header {
              position: absolute;
              z-index: 2;
              top: 0%;
              background-color: red;
              width: 100%;
              height: 20%;
          }

          footer {
              position: absolute;
              z-index: 2;
              bottom: 0;
              width: 100%;
              background-color: blue;
              height: 20%;
          }

         .NewButton {
              margin-left: 3%;
              margin-top: 2%;
              width: 100%;
              height: 30px;
              font-size: 1.0em;
              text-align: center;
         }

         #wrapper {
              position: absolute;
              z-index: 1;
              top: 20%;
              bottom: 20%;
              width: 100%;
         }
      </style>
      <script type="text/javascript">
         var arrayToModify = [];
         window.onload = function () {
         var i, MyArray, ButtonContainer, NewButton;
         MyArray = ["a","b","c","d","e","f","g","h","j","k","l","m","n"];
         ButtonContainer = document.getElementById("Button_holder");
         for  (i = 0 ; i < MyArray.length ; i++ ) {
             NewButton = document.createElement('input');
             NewButton.type = 'button';
             NewButton.value = MyArray[i];
             NewButton.className = 'NewButton';
             NewButton.id = MyArray[i];
             NewButton.onclick = function () {
                alert('You Clicked '+this.id);
                arrayToModify[arrayToModify.length] = this.id;
             };
             ButtonContainer.appendChild(NewButton);
         }};
    </script>
 </head>
 <body>
<header>start of scroll view below</header>
    <section id="wrapper">
    <section id="scroll-content" class="ButtonContainer">
            <form id="Button_holder"></form>
    </section>
   </section>
<footer>End of scroll view here</footer>
 </body>
 <script type="text/javascript" src="JavaScript/iscroll-lite.js"></script>
 <script type="text/javascript">
var theScroll;
function scroll() {
    theScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', scroll, false);
 </script>
 </html>
4

0 回答 0