Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/ios/118.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html phonegap垂直加水平滚动,可单触多个元素_Html_Ios_Cordova_Touch_Vertical Scroll - Fatal编程技术网

Html phonegap垂直加水平滚动,可单触多个元素

Html phonegap垂直加水平滚动,可单触多个元素,html,ios,cordova,touch,vertical-scroll,Html,Ios,Cordova,Touch,Vertical Scroll,这个不是给家里的孩子们的。我会奖励任何接近解决方案的人。我已经包括了一个我想要的工作示例,您可以使用它来尝试解决问题。这必须适用于iphone/android设备上的phonegap应用程序。我想做的很简单。我想能够滚动垂直与文本元素,我在包含div。当我触摸红色图像的权利,然后他们可以滚动水平。如果我侧向滚动图像,这很好,但是如果我一直按住手指并垂直滚动,文本元素不会发生任何变化。当我按下图像元素时,我希望能够垂直滚动文本元素。。请帮我解决这个问题伙计们: <!DOCTYPE html&

这个不是给家里的孩子们的。我会奖励任何接近解决方案的人。我已经包括了一个我想要的工作示例,您可以使用它来尝试解决问题。这必须适用于iphone/android设备上的phonegap应用程序。我想做的很简单。我想能够滚动垂直与文本元素,我在包含div。当我触摸红色图像的权利,然后他们可以滚动水平。如果我侧向滚动图像,这很好,但是如果我一直按住手指并垂直滚动,文本元素不会发生任何变化。当我按下图像元素时,我希望能够垂直滚动文本元素。。请帮我解决这个问题伙计们:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">

   #exerciseMenu{

    height:600px;
    overflow:scroll;
   }
.scrollImages{
            width: 100px;
            height: 125px;
            margin:10px 5px;
            float:left;
            background-color:red;

        }
    .headerWrapper{
            display: -webkit-box;
            display: -moz-box;
            display: box;
            -webkit-box-align: center;
            -moz-box-align: center;
            box-align: center;
            width:200px;
            height:157px;

        }
.exerciseWrapper{


    margin-top:5px;
    margin-right:5px;
    margin-left:5px;

    position:relative;
        border:5px solid black;
        background-color:white;
            height:157px;

        } 
.scrollWrapper {

                position:absolute; 
                border-left:6px solid black;
                right:0px;
                top:0px;
                padding-left:5px;
                width:260px;
                height:148px;
                background:#aaa;

                overflow-x:auto;



            } 
.scroller {
                padding:0;
                width:1000px;


            }
    </style>

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){


 $('body').append('<div id="exerciseMenu"></div>'); 



        for (var i=0;i<8;i++)
            {           
                AppendMenuItems();
            }

        });
       function AppendMenuItems(){

  var menuu=$('#exerciseMenu').append('<div class="exerciseWrapper">TEXT<div class="scrollWrapper"><div class="scroller">'+ 
            '<div class="scrollImages">Im</div>'+
            '<div class="scrollImages">Im</div>'+
            '<div class="scrollImages">Im</div>'+
            '<div class="scrollImages">Im</div>'+
            '<div class="scrollImages">Im</div>'+
            '<div class="scrollImages">Im</div>'+
            '<div class="scrollImages">Im</div>'+
            '<div class="scrollImages">Im</div>'+
            '</div></div></div></div>');


}
    </script>

</head>
<body>



</body>
</html>

这是一个解释不当的问题,不清楚你在寻找什么样的行为。我建议您创建一个JSFIDLE示例,也许还可以创建一些图表来说明您的意思。