Android的股票浏览器不尊重的CSS溢出 [英] Android Stock Browser Not Respecting CSS Overflow

查看：175
本文介绍了Android的股票浏览器不尊重的CSS溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正与一个谁愿意自己的接口的一部分有滚动的有些定制的方法，客户端。他们不希望平时滚动条是可见的;他们想要的台式机/笔记本电脑用户滚动他们的鼠标滚轮/触控板，他们希望移动用户滚动用他们的手指。他们还希望一个向上的箭头和向下的箭头图形以提供滚动和也以明确该滚动是可能的（因为实际的滚动条隐藏）所述用户的替代方法。客户端上设置滚动的这种方法。

我把一些code上，我已经试了一下，除了Android的股票浏览器的所有设备/浏览器组合的作品。我已经证实了这个问题，以下配置：

  • 的Andr​​oid 4.1.2（模拟器）
  • 的Andr​​oid 4.2.2（实际设备）
  • 的Andr​​oid 4.2.2（模拟器）
  • 的Andr​​oid 4.3（模拟器）

此问题的没有的在Android 4.4.2（模拟器）present，虽然。

为了让事情变得简单了这个问题，我不包括向上和向下箭头的图形和附带的逻辑。

这里的code（的jsfiddle演示）：

＆LT;！DOCTYPE HTML＆GT; ＆LT; HTML LANG =EN＆GT;   ＆LT; HEAD＆GT;     ＆LT;元字符集=utf-8＆GT;     ＆LT;冠军＆GT;演示＆LT; /标题＆GT;     ＆LT;风格＆GT;       #side_nav，.category {         位置：绝对的;       }       #side_nav {         -webkit-用户选择：无;       }       。类别 {         显示：无; / *当用户点击选项将显示* /         顶部：0;         左：150像素;       }       .ul_wrapper，.ul_wrapper UL {         宽度：125px;         高度：242px;       }       .ul_wrapper {         背景：#ccc;         边框：3PX固体＃000;         边界半径：6px;         文本对齐：中心;         溢出：隐藏;       }       UL {         保证金：0;         填充：0;         列表样式：无;         溢出-Y：滚动;       }       李{         填充顶：10px的;       }       李：最后一子{         填充底：10px的;       }       跨度 {         显示：inline-block的;         宽度：100像素;         高度：100像素;         边框：3PX固体＃999;         边界半径：6px;         光标：指针;       }       #chosen_option {         浮动：左;         保证金左：150像素;       }     ＆LT; /风格＆GT;   ＆LT; /头＆GT;   ＆LT;身体GT;     ＆LT; D​​IV ID =side_nav＆GT;       ＆LT; D​​IV CLASS =ul_wrapper＆GT;         ＆LT; UL＆GT;           ＆LT;李＆GT;             ＆LT;跨度＆GT;选择1＆LT; / SPAN＆GT;             ＆LT; D​​IV CLASS =类别＆GT;               ＆LT; D​​IV CLASS =ul_wrapper＆GT;                 ＆LT; UL＆GT;                   ＆LT;李＆GT;＆LT;跨度＆GT;方案1A＆LT; / SPAN＆GT;＆LT; /李＆GT;                   ＆LT;李＆GT;＆LT;跨度＆GT;选项1B＆LT; / SPAN＆GT;＆LT; /李＆GT;                   ＆LT;李＆GT;＆LT;跨度＆GT;选项1C＆LT; / SPAN＆GT;＆LT; /李＆GT;                 ＆LT; / UL＆GT;               ＆LT; / DIV＆GT;             ＆LT; / DIV＆GT;           ＆LT; /李＆GT;           ＆LT;李＆GT;             ＆LT;跨度＆GT;选项2'; / SPAN＆GT;             ＆LT; D​​IV CLASS =类别＆GT;               ＆LT; D​​IV CLASS =ul_wrapper＆GT;                 ＆LT; UL＆GT;                   ＆LT;李＆GT;＆LT;跨度＆GT;选项2a＆LT; / SPAN＆GT;＆LT; /李＆GT;                   ＆LT;李＆GT;＆LT;跨度＆GT;期权2B＆LT; / SPAN＆GT;＆LT; /李＆GT;                 ＆LT; / UL＆GT;               ＆LT; / DIV＆GT;             ＆LT; / DIV＆GT;           ＆LT; /李＆GT;           ＆LT;李＆GT;             ＆LT;跨度＆GT;选项3'; / SPAN＆GT;             ＆LT; D​​IV CLASS =类别＆GT;               ＆LT; D​​IV CLASS =ul_wrapper＆GT;                 ＆LT; UL＆GT;                   ＆LT;李＆GT;＆LT;跨度＆GT;选项3A＆LT; / SPAN＆GT;＆LT; /李＆GT;                 ＆LT; / UL＆GT;               ＆LT; / DIV＆GT;             ＆LT; / DIV＆GT;           ＆LT; /李＆GT;         ＆LT; / UL＆GT;       ＆LT; / DIV＆GT;     ＆LT; / DIV＆GT;     ＆LT; D​​IV ID =chosen_option＆GT;＆LT; / DIV＆GT;     ＆所述;脚本的src =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js＆GT;＆所述; /脚本＆GT;     ＆LT;脚本＆GT;       功能get_scrollbar_width（）{         无功格，身体，W = window.browserScrollbarWidth;         如果（W ===未定义）{           身体= document.body的，DIV = document.createElement方法（'格'）;           div.innerHTML ='＆LT; D​​IV的风格=宽度：50像素，高度：50像素;位置：绝对的;左：-100px;顶部：-100px;溢出：汽车;＆GT;＆LT; D​​IV的风格=宽度：1px的;高度：100像素;＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;';           DIV = div.firstChild;           body.appendChild（DIV）;           W = window.browserScrollbarWidth = div.offsetWidth - div.clientWidth;           body.removeChild（DIV）;         }         返回瓦;       }       变种scrollbar_width = get_scrollbar_width（）;       $（'＃side_nav UL）。CSS（{         填充右'：scrollbar_width，         利润率左：scrollbar_width / 2       }）;       $（'跨'）。在（'点击'，函数（事件）{         event.stopPropagation（）; // prevent $（'HTML'）点击（）。从触发         VAR parent_li = $（本）.parent（）;         VAR child_category = parent_li.children（'分类'）;         如果（child_category.length）{           VAR show_div = FALSE;           如果（child_category.is（：隐藏））{             show_div = TRUE;           }           。parent_li.siblings（）找到（'。类别：可见）淡出（）。           如果（show_div）{             child_category.fadeIn（）;           }           其他 {             parent_li.find（'类别：可见）淡出（）。           }         }         其他 {           $（'＃chosen_option）HTML（你选择'+ $（本）。html的（）与toLowerCase（）。）。           $（'。类别：可见）淡出（）。         }       }）;       $（HTML）。点击（函数（）{         $（'。类别：可见）淡出（）。       }）;     ＆LT; / SCRIPT＆GT;   ＆LT; /身体GT; ＆LT; / HTML＆GT;

当你点击任何的三个选项，选项的第二个列表会出现在右侧。但是，它永远不会出现在Android的股票浏览器，除非你删除溢出-Y：滚动; 从 UL CSS规则，但你再也不能滚动。

这个问题最好通过更换说明左：150像素; 与左：25像素; 在 .category CSS规则。当我这样做，这就是它看起来像在工作的浏览器：

这是什么样子的Andr​​oid的股票浏览器：

还有一件事我要指出的是，它在Chrome浏览器Android版。

有没有办法，我可以使这项工作在Android的股票浏览器？

解决方案

我已经受够了股票姜饼的Andr​​oid浏览器的问题。它根本不处理好溢出的CSS属性。为了使滚动在此浏览器我不得不申请溢出（滚动或自动），以在BODY容器只

I'm working with a client who would like part of their interface to have a somewhat customized method of scrolling. They don't want the usual scrollbars to be visible; they want desktop / laptop users to scroll with their mouse wheel / touchpad and they want mobile users to scroll with their finger. They also want graphics of an up arrow and a down arrow to provide an alternate method of scrolling and also to make it obvious to the user that scrolling is possible (since the actual scrollbars are hidden). The client is set on this method of scrolling.

I put together some code that works on all device / browser combinations that I've tried it on except for Android's stock browser. I have confirmed this issue with the following configurations:

  • Android 4.1.2 (emulator)
  • Android 4.2.2 (actual device)
  • Android 4.2.2 (emulator)
  • Android 4.3 (emulator)

This issue is not present on Android 4.4.2 (emulator), though.

In order to keep things simple for this question, I'm not including the graphics of the up and down arrows and the accompanying logic.

Here's the code (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>

When you tap on any of the three options, a second list of options should appear to the right. However, it never appears on Android's stock browser unless you remove overflow-y: scroll; from the ul CSS rules, but then you can no longer scroll.

The problem is best illustrated by replacing left: 150px; with left: 25px; in the .category CSS rules. When I do that, this is what it looks like in a working browser:

And this is what it looks like in Android's stock browser:

One other thing I should note is that it works in Chrome for Android.

Is there a way that I can make this work in Android's stock browser?

解决方案

I've had issues with the stock Gingerbread Android browser. It does not handle the overflow CSS property well at all. In order to enable scrolling on this browser I had to apply the overflow ("scroll" or "auto") to the BODY container only.

这篇关于Android的股票浏览器不尊重的CSS溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆