1

这个不适合家里的孩子。我会奖励任何接近解决方案的人。我已经包含了一个我想要你可以用来尝试解决问题的工作示例。这必须在 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>
4

0 回答 0