Android Stock Browser не соблюдает переполнение CSS

Я работаю с клиентом, который хотел бы, чтобы часть их интерфейса имела несколько настраиваемый метод прокрутки. Они не хотят, чтобы обычные полосы прокрутки были видны; они хотят, чтобы пользователи настольных компьютеров/ноутбуков прокручивали их колесиком мыши/сенсорной панелью, и они хотят, чтобы мобильные пользователи прокручивали пальцем. Они также хотят графику стрелки вверх и стрелки вниз, чтобы предоставить альтернативный метод прокрутки, а также сделать очевидным для пользователя, что прокрутка возможна (так как фактические полосы прокрутки скрыты). Клиент настроен на этот метод прокрутки.

Я собрал код, который работает на всех комбинациях устройств/браузеров, которые я пробовал, за исключением браузера 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>

Ответы

Ответ 1

У меня были проблемы с Android-браузером Gingerbread. Он вообще не обрабатывает свойство CSS переполнения. Чтобы включить прокрутку в этом браузере, мне пришлось применить переполнение ( "прокрутка" или "авто" ) только к контейнеру BODY.

Ответ 2

Я считаю, что браузер Android для Android не поддерживает свойства переполнения x/y. Вместо включения overflow-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, но обычно это более желательно, чем правило игнорируется полностью. Для браузеров, которые поддерживают переполнение по оси, пользователь не будет знать разницу.