为什么overflow-y 不能在手机上运行？答案

【问题标题】：Why doesn't overflow-y work on a mobile?为什么overflow-y 不能在手机上运行？
【发布时间】：2018-03-20 13:42:25
【问题描述】：

我有 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 的一部分被隐藏了，但我的滚动条没有出现。我该如何解决这个问题？

【问题讨论】：

标签： android css html mobile

【解决方案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>

【讨论】：

【解决方案2】：

首先，当您想要滚动一个区域时，大多数情况下会出现滚动。看看文字是不是从下往下剪的。再次触摸该区域并尝试向上滚动。这是因为在 android 中滚动不显示 CSS overflow 何时实现。

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

另外你添加overflow-x:hidden;

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

谢谢

【讨论】：