Question

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

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

Android 4.1.2（模拟器）
Android 4.2.2（实际设备）
Android 4.2.2（模拟器）
Android 4.3（模拟器）

此问题在Android 4.4.2（模拟器）上存在不。

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

以下是代码（jsFiddle demo）：

<!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>

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

通过在left: 150px; CSS规则中将left: 25px;替换为.category，可以最好地说明问题。当我这样做时，这就是在工作浏览器中的样子：

Working browser

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

Android's stock browser

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

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

Answer 1

我的姜饼Android浏览器存在问题。它根本不能很好地处理溢出的CSS属性。为了在这个浏览器上滚动，我必须将溢出（“滚动”或“自动”）仅应用于BODY容器。

Answer 2

我认为Android股票浏览器不支持x / y特定的溢出属性。而不是打开溢出-y，打开溢出然后关闭溢出-x。例如：

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

应该成为：

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

通常我使用auto而不是滚动，因此如果没有必要，滚动条将不会显示。此外，在您的情况下，或许overflow-x: hidden;可能更合适。基本上这会将你想要的overflow-y属性应用于overflow-x，但通常这比完全忽略的规则更合乎需要。对于支持轴特定溢出的浏览器，用户不会知道差异。

Android Stock浏览器不支持CSS溢出

2 个答案: