2
我正在努力使我们网站的一部分具有响应性，并且发现在特定的div中，如果用户使用触摸屏尝试和滚动此div，它不起作用。滚动不在特定DIV内的移动设备上工作
在下图中，您可以看到div，其中滚动不适用于手机，如果用户触摸div以外的区域，可以滚动。 
我认为一些CSS的float规则导致，但即使我删除了所有彩车从DIV & 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>
我认为你需要一个clearfix – sglazkov
@notbatman，我添加了一个代码示例，谢谢 – Holly
@sglazkov，我试着给每个div添加一个clearfix，但没有运气 – Holly