首页 > 代码库 > ionic中<ion-scroll>设置为左右滚动,苹果手机端触摸到此标签上时无法上下滚动内容

ionic中<ion-scroll>设置为左右滚动,苹果手机端触摸到此标签上时无法上下滚动内容

ionic中<ion-scroll>设置为左右滚动,苹果手机端触摸到此标签上时无法上下滚动内容。

如下代码:

<ion-scroll direction="x" scrollbar-x="false" style="width:100%"> 
<ul class="brand-scrollList">
<li ng-repeat="lists in bestProjects" ng-if="$index<10" ng-click="toProject(lists.id)">
<img ng-src="http://www.mamicode.com/{{lists.image}}" err-src="http://www.mamicode.com/img/middle.jpg">
<p class="brandName">{{lists.title}}</p>
</li>

</ul>
 </ion-scroll> 

解决:去掉<ion-scroll>自定义滚动

 

 

css:

.scroll-forXY{
overflow-x: scroll;
overflow-y: hidden;
overflow-scrolling: touch;
}

 

<div class="scroll-forXY">

<ul class="brand-scrollList">
<li ng-repeat="lists in bestProjects" ng-if="$index<10" ng-click="toProject(lists.id)">
<img ng-src="http://www.mamicode.com/{{lists.image}}" err-src="http://www.mamicode.com/img/middle.jpg">
<p class="brandName">{{lists.title}}</p>
</li>

</ul>
</div>

ionic中<ion-scroll>设置为左右滚动,苹果手机端触摸到此标签上时无法上下滚动内容