Android Stock浏览器不支持CSS溢出

Question

Android Stock浏览器不支持CSS溢出

Nic*_*ick 16 css android android-browser

我正在与一个客户一起工作,他们希望他们的部分界面有一个有点自定义的滚动方法.他们不希望通常的滚动条可见; 他们希望台式机/笔记本电脑用户使用鼠标滚轮/触摸板滚动,他们希望移动用户用手指滚动.他们还希望使用向上箭头和向下箭头的图形来提供另一种滚动方法,并使用户明白可以滚动(因为实际的滚动条是隐藏的).客户端设置为此滚动方法.

我整理了一些代码,这些代码适用于我尝试过的所有设备/浏览器组合,除了Android的股票浏览器.我已通过以下配置确认了此问题:

Android 4.1.2(模拟器)
Android 4.2.2(实际设备)
Android 4.2.2(模拟器)
Android 4.3(模拟器)

但是,Android 4.4.2(模拟器)上不存在此问题.

为了使这个问题变得简单,我不包括上下箭头的图形和随附的逻辑.

这是代码(jsFiddle演示):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      #side_nav, .category {
        position: absolute;
      }

      #side_nav {
        -webkit-user-select: none;
      }

      .category {
        display: none; /* Will be shown when user clicks on an option */
        top: 0;
        left: 150px;
      }

      .ul_wrapper, .ul_wrapper ul {
        width: 125px;
        height: 242px;
      }

      .ul_wrapper {
        background: #ccc;
        border: 3px solid #000;
        border-radius: 6px;
        text-align: center;
        overflow: hidden;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow-y: scroll;
      }

      li {
        padding-top: 10px;
      }

      li:last-child {
        padding-bottom: 10px;
      }

      span {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 3px solid #999;
        border-radius: 6px;
        cursor: pointer;
      }

      #chosen_option {
        float: left;
        margin-left: 150px;
      }
    </style>
  </head>
  <body>
    <div id="side_nav">
      <div class="ul_wrapper">
        <ul>
          <li>
            <span>Option 1</span>
            <div class="category">
              <div class="ul_wrapper">
                <ul>
                  <li><span>Option 1a</span></li>
                  <li><span>Option 1b</span></li>
                  <li><span>Option 1c</span></li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <span>Option 2</span>
            <div class="category">
              <div class="ul_wrapper">
                <ul>
                  <li><span>Option 2a</span></li>
                  <li><span>Option 2b</span></li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <span>Option 3</span>
            <div class="category">
              <div class="ul_wrapper">
                <ul>
                  <li><span>Option 3a</span></li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div id="chosen_option"></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      function get_scrollbar_width() {
        var div, body, W = window.browserScrollbarWidth;
        if (W === undefined) {
          body = document.body, div = document.createElement('div');
          div.innerHTML = '<div style="width: 50px; height: 50px; position: absolute; left: -100px; top: -100px; overflow: auto;"><div style="width: 1px; height: 100px;"></div></div>';
          div = div.firstChild;
          body.appendChild(div);
          W = window.browserScrollbarWidth = div.offsetWidth - div.clientWidth;
          body.removeChild(div);
        }
        return W;
      }

      var scrollbar_width = get_scrollbar_width();

      $('#side_nav ul').css({
        'padding-right': scrollbar_width,
        'margin-left': scrollbar_width / 2
      });

      $('span').on('click', function(event) {
        event.stopPropagation(); // Prevent $('html').click(); from triggering

        var parent_li = $(this).parent();
        var child_category = parent_li.children('.category');

        if (child_category.length) {
          var show_div = false;

          if (child_category.is(':hidden')) {
            show_div = true;
          }

          parent_li.siblings().find('.category:visible').fadeOut();

          if (show_div) {
            child_category.fadeIn();
          }
          else {
            parent_li.find('.category:visible').fadeOut();
          }
        }
        else {
          $('#chosen_option').html('You chose ' + $(this).html().toLowerCase());
          $('.category:visible').fadeOut();
        }
      });

      $('html').click(function() {
        $('.category:visible').fadeOut();
      });
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

当您点击三个选项中的任何一个时,右侧会出现第二个选项列表.但是,它永远不会出现在Android的股票浏览器上,除非您overflow-y: scroll;从ulCSS规则中删除,但随后您无法再滚动.

这个问题最好是通过更换说明left: 150px;与left: 25px;在.categoryCSS规则.当我这样做时,这就是在工作浏览器中的样子:

工作浏览器

这就是Android的股票浏览器中的样子:

Android的股票浏览器

我应该注意的另一件事是它适用于Android版Chrome.

有没有办法让我可以在Android的股票浏览器中使用它？

Answer 1

MaK*_*aKR 0

我相信 Android 原生浏览器不支持特定于 x/y 的溢出属性。不要打开溢出-y，而是打开溢出，然后关闭溢出-x。例子：

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: scroll;
}

Run Code Online (Sandbox Code Playgroud)

应该变成：

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: scroll;
    overflow-x: visible;
}

Run Code Online (Sandbox Code Playgroud)

通常我使用自动而不是滚动，因此如果不需要，滚动条不会显示。另外，overflow-x: hidden;在您的情况下也许更理想。基本上，这也会将您想要的overflow-y属性应用到overflow-x，但通常这比完全忽略规则更可取。对于支持特定于轴的溢出的浏览器，用户不会知道其中的区别。

遗憾的是，这并没有奏效。我认为这与[此处]（http://stackoverflow.com/a/6433475/937084）解释的行为有关。此外，Android 的原生浏览器似乎很好地支持 x/y 特定的溢出属性（我测试了[此页面](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) 和[此页面](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y) 使用 Android 4.2.2 的原生浏览器)。最后，为了解释为什么我在 `ul` CSS 规则中有 `overflow-y:scroll;`，将其设置为 `auto` 会导致选项 2 和 3 选择不居中。感谢您的尝试！ (2认同)

归档时间：	11 年，9 月前
查看次数：	6814 次
最近记录：	10 年，4 月前