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