为什么溢出在移动设备上不起作用？

Question

我有CSS：

@media (max-width: 480px) {
  #creating_products {
    max-height: 400px;
    overflow-y: scroll;
  }
}

.HTML：

<div id="creating_products">
   <div id="product_fields">
      <ul id="sortable_invoice_products">
          {section name=foo start=1 loop=11 step=1}
              <div class="invoice_margin_template"></div>
              <li class="ui-sortable-handle invoice_sortable">
                   <div class="product_fields_parent">
                       ........
                   </div>
               </li>
          {/section}
      </ul>
   </div>
</div>

当我在我的Android上测试这段代码时，"creating_products"div的一部分被隐藏了，但我的滚动条没有出现。如何解决此问题？

Answer 1

也许您的 html 已损坏，桌面浏览器正在即时修复它？尝试删除 <ul> 标记内的<div class="invoice_margin_template"></div>，并确保<li>内的 html 有效

body{
  background: red;
}
@media (max-width: 480px) {
  #creating_products {
    max-height: 100px;
    overflow-y: scroll;
  }
}

<div id="creating_products">
  <div id="product_fields">
    <ul id="sortable_invoice_products">
      <li class="ui-sortable-handle invoice_sortable">
        <div class="product_fields_parent"></div>
        some content
      </li>
      <li class="ui-sortable-handle invoice_sortable">
        <div class="product_fields_parent"></div>
        some content
      </li>
      <li class="ui-sortable-handle invoice_sortable">
        <div class="product_fields_parent"></div>
        some content
      </li><li class="ui-sortable-handle invoice_sortable">
        <div class="product_fields_parent"></div>
        some content
      </li>
      <li class="ui-sortable-handle invoice_sortable">
        <div class="product_fields_parent"></div>
        some content
      </li>
      <li class="ui-sortable-handle invoice_sortable">
        <div class="product_fields_parent"></div>
        some content
      </li>
    </ul>
  </div>
</div>

Answer 2

首先，当您要滚动一个区域时，主要会出现滚动。查看文本是否不是从下剪切的。再次触摸该区域并尝试向上滚动。这是因为在 android 中滚动不会显示何时实现了 CSS overflow。

第二件事，用height代替max-height。试试这个，看看它是否会帮助你。有时max-height不起作用。

此外，您还可以添加overflow-x:hidden;

愿这些简单的改变对你有用。

谢谢