Question

我正在尝试使用一堆文本字段实现一个简单的页面，并使用iscroll进行滚动。

问题是，当我点击文本字段时，会出现键盘，但我无法滚动到屏幕底部或屏幕顶部。

这是代码。任何有关这方面的帮助都非常感谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>sample</title>
    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
     -->
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">    
    //  If you want to prevent dragging, uncomment this section
    /*  function preventBehavior(e) 
        { 
            e.preventDefault(); 
        }    
        document.addEventListener("touchmove", preventBehavior, false);*/

        function onBodyLoad()
        {
            document.addEventListener("deviceready",onDeviceReady,false);
        }    

        /* When this function is called, PhoneGap has been initialized and is ready to roll */
        function onDeviceReady()
        {  
            // do your thing!
        }  
    </script>
    <link rel="stylesheet" type="text/css" href="scrollbar.css">
    <script type="application/javascript" src="src/iscroll.js?v4"></script>    
    <script type="text/javascript">
        var myScroll;

        function loaded() {
            myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', loaded, false);
    </script>
    <style type="text/css" media="all">
        body,ul,li {
            padding:0;
            margin:0;
            border:0;
        }    
        body {
            font-size:12px;
            -webkit-user-select:none;
            -webkit-text-size-adjust:none;
            font-family:helvetica;
        }   
        #header {
            position:absolute;
            top:0; 
            left:0;
            width:100%;
            height:45px;
            line-height:45px;
            background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
            padding:0;
            color:#eee;
            font-size:20px;
            text-align:center;
       }
       #header a {
           color:#f3f3f3;
           text-decoration:none;
           font-weight:bold;
           text-shadow:0 -1px 0 rgba(0,0,0,0.5);
       }
       #footer {
           position:absolute;
           bottom:0; 
           left:0;
           width:100%;
           height:48px;
           background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
           padding:0;
           border-top:1px solid #444;
       }
       #wrapper {
           position:absolute; 
           z-index:1;
           top:45px; 
           bottom:48px; 
           left:0;
           width:100%;
           background:#aaa;
           overflow:auto;
       }
       #scroller {
           position:relative;
           /*-webkit-touch-callout:none;*/    
           -webkit-tap-highlight-color:rgba(0,0,0,0);
           float:left;
           width:100%;
           padding:0;
       }
       #scroller ul {
           position:relative;
           list-style:none;
           padding:0;
           margin:0;
           width:100%;
           text-align:left;
       }
       #scroller li {
           padding:0 10px;
           height:40px;
           line-height:40px;
           border-bottom:1px solid #ccc;
           border-top:1px solid #fff;
           background-color:#fafafa;
           font-size:14px;
       }
       #scroller li > a {
           display:block;
       }    
    </style>    
</head>
<body>
    <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
    <div id="wrapper">
        <div id="scroller">
            <ul id="thelist">
                <li><input></li>
                <li><input></li>
                <li><input></li>
                <li><input></li>
                <li><input></li>
                <li><input></li>
                <li><input></li>
                <li><input></li>
                <li><input></li>
                <li><input></li>
                <li><input></li>
            </ul>
        </div>  
   </div>    
   <div id="footer"></div>   
</body>
</html>

Answer 1

看看这个 iScroll 4 not working with form <select> element iPhone Safari and Android browser

我面临同样的问题。为我工作。只是一个小小的变化。而不是为select标签做，而是针对你面临问题的所有标签。

Answer 2

尝试删除-webkit-user-select:none;

iScroll滚动问题

2 个答案: