【问题标题】:Android browser bug? div overflow scrolling安卓浏览器漏洞? div溢出滚动
【发布时间】:2011-12-22 05:29:08
【问题描述】:

你能让 div 的溢出内容在 Android 浏览器中滚动吗?

它可以在所有其他现代浏览器中滚动。

在 iOS 中它是可滚动的 - 但是它不显示滚动条 - 但它可以通过拖动来滚动。

一个简单的例子: http://jsfiddle.net/KPuW5/1/embedded/result/

这会很快解决吗?

【问题讨论】:

标签: android html android-browser


【解决方案1】:

Android 3.0 及更高版本支持overflow:scroll,在

我会推荐一种不同的方法:使用 Modernizr 来检测对溢出滚动的支持,将一个类添加到您的 html 标记并使用它来重写您的 CSS 以便页面“正常”滚动而不是在一个框中。

/* For browsers that support overflow scrolling */
#div {
    height: 400px;
    overflow: auto;
}

/* And for browsers that don't */
html.no-overflowscrolling #div {
    height: auto;
}

【讨论】:

  • 我认为您推荐的方法是基于一种误解。 Modernizr 的overflowscrolling 测试不是看overflow:scroll 在浏览器中是否有效,而是浏览器是否支持*-overflow-scrolling css 属性,这是不同的。
【解决方案2】:

从 Android 3 (API 11) 开始支持overflow: scroll;

对于跨平台(即 iOS Cubiq iScroll 是一个易于实施的修复程序。

【讨论】:

    【解决方案3】:

    您可以尝试touchscoll.js 用于可滚动的 div 元素

    【讨论】:

      【解决方案4】:

      只是为了完整性:

      滚动条实际上​​存在于 Android 2.3 中,但它们非常有问题,并且默认情况下它们的样式为 0 宽度,因此它们是不可见的。

      您可以通过添加如下样式使它们可见:

      ::-webkit-scrollbar {
          width: 30px;
      }
      ::-webkit-scrollbar-track {
          background-color: $lightestgrey;
      }
      ::-webkit-scrollbar-thumb {
          background-color: $lightgrey;
      }
      

      但是,拇指元素不可拖动,您只能通过点击其下方或上方的轨道来移动它。

      此外,这些样式会改变所有 webkit 浏览器中滚动条的外观,因此最好添加一个仅适用于 Android 2.3 的类。

      【讨论】:

        【解决方案5】:

        您可以通过在 CSS 中定义滚动条的样式来使 DIV 在 Android 中可滚动。 本文向您展示了如何做到这一点: http://css-tricks.com/custom-scrollbars-in-webkit/

        【讨论】:

        • 您能否在此处包含一个简短的示例,以防止在该链接失效时/当该链接失效时此答案变得无用?
        • 这确实在 Android 2.3 上显示滚动条,但不会使 div 可滚动:(
        • Husky,我在 Android 2.3 上试用它,它可以工作。也许行为在不同的设备中有所不同。试试这个 webapp:applications.frenys.com/webapp/?ref=dl&app=116815031665454(你必须触摸/点击滚动条轨道的空白部分)
        • @juamp 这如何回答这个问题?
        猜你喜欢
        • 2011-02-08
        • 2014-06-27
        • 1970-01-01
        • 1970-01-01
        • 2012-03-29
        • 2016-06-04
        • 2012-06-02
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多