滚动不适用于特定 DIV 中的移动设备答案

【问题标题】：Scroll not working on mobile within a specific DIV滚动不适用于特定 DIV 中的移动设备
【发布时间】：2016-06-08 15:24:00
【问题描述】：
我正在努力使我们网站的一部分具有响应性，并发现如果用户使用触摸屏尝试在此 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
@notbatman，我添加了代码示例，谢谢
@sglazkov，我尝试为每个 div 添加一个 clearfix，但没有成功
标签： css scroll responsive-design touchscreen
【解决方案1】：
大多数情况下发生这种情况是由于打开了 div
尝试使用 firebug/chrome 开发者工具从您的移动页面中删除整个 div 部分（从头到尾），看看这是否能解决任何问题
你能把你所有的源代码贴在某个地方吗？
【讨论】：