滚动不在特定DIV中的移动设备上工作
我正致力于让我们网站的一部分做出响应，并且发现在移动设备上滚动功能无法在特定div内运行，如果用户使用触摸屏尝试在此内滚动div，它不起作用。
如下图所示，如果用户触摸可以滚动的div之外的区域，则可以看到滚动在移动设备上不起作用的div。
我认为一些CSS float规则导致了它，但即使我从div中删除了所有的浮点数。这个问题仍然存在，他们的孩子仍然存在。
我还尝试从主要div中删除导致问题的所有规则，但问题仍然存在。
<div id="product-choices-inner-container">
<ul id="product-choices-side-menu" class="hidden-xs sidemenu side1 " data-pid="1">
<span class="skewing"></span>
<h3>Menu</h3>
<li class="product-choices-side-elem option-0 active">
<a href="http://www.example.com/program/choice/products/meal-1/">Breakfast <span>
21 products</span>
</a>
<span class="side-menu-position-indicator"></span>
</li>
<li class="product-choices-side-elem option-1">
<a href="http://www.example.com/program/choice/products/meal-2/">Lunch <span>
21 products</span>
</a>
<span class="side-menu-position-indicator"></span>
</li>
<li class="product-choices-side-elem option-2">
<a href="http://www.example.com/program/choice/products/meal-3/">Snack <span>
21 products</span>
</a>
<span class="side-menu-position-indicator"></span>
</li>
<li class="product-choices-side-elem option-3">
<a href="http://www.example.com/program/choice/products/meal-4/">Dinner <span>
Basic </span></a>
<span class="side-menu-position-indicator"></span>
</li>
</ul>
<select class="product-choices-side-menu-mobile hidden-sm hidden-md hidden-lg sidemenu side1 " data-pid="1">
<option class="product-choices-side-elem option-0" value="option-0" selected="">
Breakfast - 21 products </option>
<option class="product-choices-side-elem option-1" value="option-1">
Lunch - 21 products </option>
<option class="product-choices-side-elem option-2" value="option-2">
Snack - 21 products </option>
<option class="product-choices-side-elem option-3" value="option-3">
Dinner - Basic </option>
</select>
<ul id="product-choices-side-menu" class="hidden-xs sidemenu side2 hide" data-pid="2">
<span class="skewing"></span>
<h3>Menu</h3>
<li class="product-choices-side-elem option-0 active">
<a href="http://www.example.com/program/choice/products/meal-1/">Breakfast <span>
Basic </span></a>
<span class="side-menu-position-indicator"></span>
</li>
<li class="product-choices-side-elem option-1">
<a href="http://www.example.com/program/choice/products/meal-2/">Lunch <span>
Basic </span></a>
<span class="side-menu-position-indicator"></span>
</li>
<li class="product-choices-side-elem option-2">
<a href="http://www.example.com/program/choice/products/meal-3/">Snack <span>
14 products</span>
</a>
<span class="side-menu-position-indicator"></span>
</li>
<li class="product-choices-side-elem option-3">
<a href="http://www.example.com/program/choice/products/meal-4/">Dinner <span>
Basic </span></a>
<span class="side-menu-position-indicator"></span>
</li>
</ul>
<select class="product-choices-side-menu-mobile hidden-sm hidden-md hidden-lg sidemenu side2 hide" data-pid="2">
<option class="product-choices-side-elem option-0" value="option-0" selected="">
Breakfast - Basic </option>
<option class="product-choices-side-elem option-1" value="option-1">
Lunch - Basic </option>
<option class="product-choices-side-elem option-2" value="option-2">
Snack - 14 products </option>
<option class="product-choices-side-elem option-3" value="option-3">
Dinner - Basic </option>
</select>
<div id="product-choices-product-list-container">
<div id="product-choices-product-list-title">
<span class="puce">1</span>
<h2>Menu</h2>
<h3>Lorem Ipsum Det Amet</h3>
<ul>
<li>
<div class="icon">
<img src="http://www.example.com/media/portions/53fc5sd28a74059.gif">
</div>
1 Meat product <a href="http://www.example.com/program/menus/portion/6/" class="portion-ex hidden-xs">See an example</a>
</li>
<li>
<div class="icon">
<img src="http://www.example.com/media/portions/53fcas52d617142.gif">
</div>
1 veg <a href="http://www.example.com/program/menus/portion/11/" class="portion-ex hidden-xs">See an example</a>
</li>
<li>
<div class="icon">
<img src="http://www.example.com/media/portions/53fc52eacdsa51c4.gif">
</div>
1 fiber product <a href="http://www.example.com/program/menus/portion/12/" class="portion-ex hidden-xs">See an example</a>
</li>
</ul>
<div class="menupart1">
<div class="fancy-box-products-container product-listing ui-widget ui-widget-header ui-corner-all ps-container" style="overflow: hidden">
<div class="products fancybox-products" style="width: 1162px;">
<div class="product" data-id="59" style="cursor: pointer;">
<span class="qty visible-xs-*">x2</span>
<div class="thumbnail">
<img class="imgproduct" alt="Product Name" src="http://www.example.com/media/catalog/product/images/catalog/product/placeholder/small_image.jpg">
<div class="pictos">
<img class="meat" src="http://www.example.com/skin/frontend/bootstrapped/default/images/picto.png" alt="Preferred by customers">
<img class="vegetarian" src="http://www.example.com/skin/frontend/bootstrapped/default/images/pic.png" alt="Vegetarian">
</div>
</div>
<span class="title visible-xs-*">Product Name</span>
<span class="title hidden-xs">Product Name</span>
</div>
</div>
<div class="product" data-id="59" style="cursor: pointer;">
<span class="qty visible-xs-*">x2</span>
<div class="thumbnail">
<img class="imgproduct" alt="Product Name" src="http://www.example.com/media/catalog/product/images/catalog/product/placeholder/small_image.jpg">
<div class="pictos">
<img class="meat" src="http://www.example.com/skin/frontend/bootstrapped/default/images/picto.png" alt="Preferred by customers">
<img class="vegetarian" src="http://www.example.com/skin/frontend/bootstrapped/default/images/pic.png" alt="Vegetarian">
</div>
</div>
<span class="title visible-xs-*">Product Name</span>
<span class="title hidden-xs">Product Name</span>
</div>
<div class="product" data-id="59" style="cursor: pointer;">
<span class="qty visible-xs-*">x2</span>
<div class="thumbnail">
<img class="imgproduct" alt="Product Name" src="http://www.example.com/media/catalog/product/images/catalog/product/placeholder/small_image.jpg">
<div class="pictos">
<img class="meat" src="http://www.example.com/skin/frontend/bootstrapped/default/images/picto.png" alt="Preferred by customers">
<img class="vegetarian" src="http://www.example.com/skin/frontend/bootstrapped/default/images/pic.png" alt="Vegetarian">
</div>
</div>
<span class="title visible-xs-*">Product Name</span>
<span class="title hidden-xs">Product Name</span>
</div>
<div class="product" data-id="59" style="cursor: pointer;">
<span class="qty visible-xs-*">x2</span>
<div class="thumbnail">
<img class="imgproduct" alt="Product Name" src="http://www.example.com/media/catalog/product/images/catalog/product/placeholder/small_image.jpg">
<div class="pictos">
<img class="meat" src="http://www.example.com/skin/frontend/bootstrapped/default/images/picto.png" alt="Preferred by customers">
<img class="vegetarian" src="http://www.example.com/skin/frontend/bootstrapped/default/images/pic.png" alt="Vegetarian">
</div>
</div>
<span class="title visible-xs-*">Product Name</span>
<span class="title hidden-xs">Product Name</span>
</div>
<div class="product" data-id="59" style="cursor: pointer;">
<span class="qty visible-xs-*">x2</span>
<div class="thumbnail">
<img class="imgproduct" alt="Product Name" src="http://www.example.com/media/catalog/product/images/catalog/product/placeholder/small_image.jpg">
<div class="pictos">
<img class="meat" src="http://www.example.com/skin/frontend/bootstrapped/default/images/picto.png" alt="Preferred by customers">
<img class="vegetarian" src="http://www.example.com/skin/frontend/bootstrapped/default/images/pic.png" alt="Vegetarian">
</div>
</div>
<span class="title visible-xs-*">Product Name</span>
<span class="title hidden-xs">Product Name</span>
</div>
<div class="product" data-id="59" style="cursor: pointer;">
<span class="qty visible-xs-*">x2</span>
<div class="thumbnail">
<img class="imgproduct" alt="Product Name" src="http://www.example.com/media/catalog/product/images/catalog/product/placeholder/small_image.jpg">
<div class="pictos">
<img class="meat" src="http://www.example.com/skin/frontend/bootstrapped/default/images/picto.png" alt="Preferred by customers">
<img class="vegetarian" src="http://www.example.com/skin/frontend/bootstrapped/default/images/pic.png" alt="Vegetarian">
</div>
</div>
<span class="title visible-xs-*">Product Name</span>
<span class="title hidden-xs">Product Name</span>
</div>
<div class="product" data-id="59" style="cursor: pointer;">
<span class="qty visible-xs-*">x2</span>
<div class="thumbnail">
<img class="imgproduct" alt="Product Name" src="http://www.example.com/media/catalog/product/images/catalog/product/placeholder/small_image.jpg">
<div class="pictos">
<img class="meat" src="http://www.example.com/skin/frontend/bootstrapped/default/images/picto.png" alt="Preferred by customers">
<img class="vegetarian" src="http://www.example.com/skin/frontend/bootstrapped/default/images/pic.png" alt="Vegetarian">
</div>
</div>
<span class="title visible-xs-*">Product Name</span>
<span class="title hidden-xs">Product Name</span>
</div>
<div class="product" data-id="59" style="cursor: pointer;">
<span class="qty visible-xs-*">x2</span>
<div class="thumbnail">
<img class="imgproduct" alt="Product Name" src="http://www.example.com/media/catalog/product/images/catalog/product/placeholder/small_image.jpg">
<div class="pictos">
<img class="meat" src="http://www.example.com/skin/frontend/bootstrapped/default/images/picto.png" alt="Preferred by customers">
<img class="vegetarian" src="http://www.example.com/skin/frontend/bootstrapped/default/images/pic.png" alt="Vegetarian">
</div>
</div>
<span class="title visible-xs-*">Product Name</span>
<span class="title hidden-xs">Product Name</span>
</div>
<div class="product" data-id="59" style="cursor: pointer;">
<span class="qty visible-xs-*">x2</span>
<div class="thumbnail">
<img class="imgproduct" alt="Product Name" src="http://www.example.com/media/catalog/product/images/catalog/product/placeholder/small_image.jpg">
<div class="pictos">
<img class="meat" src="http://www.example.com/skin/frontend/bootstrapped/default/images/picto.png" alt="Preferred by customers">
<img class="vegetarian" src="http://www.example.com/skin/frontend/bootstrapped/default/images/pic.png" alt="Vegetarian">
</div>
</div>
<span class="title visible-xs-*">Product Name</span>
<span class="title hidden-xs">Product Name</span>
</div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px; width: 272px; display: inherit;"><div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div></div><div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px; height: 735px; display: none;"><div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div></div></div>
</div> </div>
</div>
</div>
1 个答案:
答案 0 :(得分：0)
大部分时间都是由于开放的div而发生的
尝试使用firebug / chrome开发人员工具从移动页面中删除div的整个部分（从开始到底部），看看这是否能解决任何问题
您可以在某处发布所有源代码吗？
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？