Question Navigateur Android Stock ne respectant pas le dépassement CSS


Je travaille avec un client qui souhaite qu'une partie de son interface ait une méthode de défilement quelque peu personnalisée. Ils ne veulent pas que les barres de défilement habituelles soient visibles; ils veulent que les utilisateurs de bureau / portables défilent avec leur molette / pavé tactile et ils souhaitent que les utilisateurs mobiles défilent avec le doigt. Ils veulent également que les graphiques d'une flèche vers le haut et d'une flèche vers le bas fournissent une autre méthode de défilement et permettent également à l'utilisateur de voir que le défilement est possible (puisque les barres de défilement sont masquées). Le client est défini sur cette méthode de défilement.

J'ai mis en place un code qui fonctionne sur toutes les combinaisons appareil / navigateur que j'ai essayé, à l'exception du navigateur de stock d'Android. J'ai confirmé ce problème avec les configurations suivantes:

  • Android 4.1.2 (émulateur)
  • Android 4.2.2 (appareil réel)
  • Android 4.2.2 (émulateur)
  • Android 4.3 (émulateur)

Ce problème est ne pas présent sur Android 4.4.2 (émulateur), cependant.

Afin de garder les choses simples pour cette question, je n'inclus pas les graphiques des flèches haut et bas et la logique qui les accompagne.

Voici le code (jsfiddle démo):

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

Lorsque vous appuyez sur l'une des trois options, une deuxième liste d'options doit apparaître à droite. Cependant, il n'apparaît jamais sur le navigateur de stock d'Android à moins que vous ne supprimiez overflow-y: scroll; du ul Les règles CSS, mais vous ne pouvez plus faire défiler.

Le problème est mieux illustré en remplaçant left: 150px; avec left: 25px; dans le .category Règles CSS. Lorsque je fais cela, voici à quoi cela ressemble dans un navigateur de travail:

Working browser

Et voici à quoi cela ressemble dans le navigateur stock d'Android:

Android's stock browser

Une autre chose que je devrais noter est que cela fonctionne dans Chrome pour Android.

Y a-t-il un moyen pour que cela fonctionne dans le navigateur de stock d'Android?


16
2018-01-24 22:56


origine


Réponses:


J'ai eu des problèmes avec le navigateur Android Gingerbread stock. Il ne gère pas bien la propriété CSS de débordement. Afin de permettre le défilement sur ce navigateur, j'ai dû appliquer le débordement ("scroll" ou "auto") au conteneur BODY uniquement.


2
2018-01-29 16:40



Je crois que le navigateur stock Android ne prend pas en charge les propriétés de débordement spécifiques à x / y. Au lieu d'activer le débordement-y, activez le débordement puis désactivez-le pour le dépassement de capacité-x. Exemple:

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

devraient devenir:

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

En général, j'utilise auto au lieu de scroll pour que les barres de défilement ne s'affichent pas si nécessaire. Aussi peut-être overflow-x: hidden; peut être plus souhaitable dans votre situation. Fondamentalement, cela appliquera également votre propriété overflow-y souhaitée à overflow-x, mais cela est généralement plus souhaitable que la règle étant complètement ignorée. Pour les navigateurs prenant en charge les débordements spécifiques aux axes, l'utilisateur ne connaîtra pas la différence.


0
2018-01-29 16:38