Android中滚动条消失了？

Question

我正在使用媒体查询来构建此网站的移动版本：http://www.foodjing.com/。

当我缩小我的台式电脑浏览器窗口时，滚动条会完美地显示(在光标下的那个)：

但是，当该网站在Android手机上显示时，即使溢出div中有项目，滚动条也会消失。

有没有什么建议来修复这个问题？

代码:

搜索结果的默认CSS:

div#resultsListing {
    float:left;
    height:100%;
    margin:0;
    padding:0;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;

    ol {
        width: auto;
        height: 100%;
        margin: 0;
        padding: 0;
        li.place {
            display: none; // initially hidden, we will fade in
            list-style: none;

            &:hover, &.active-on-map { background-color: #F8F8F2; }

            span.dish-name { color:#228; }
            .highlight { background-color:#FEFECE; }
            .dish-name {
                font-size: 16px;
                font-weight: bold;
                font-family: Bitstream Charter, Georgia, Times Romans, serif;
                float: left;
                margin: 5px 5px 0 0;
            }
            .place-name {
                color: #CC5033;
                font-size: 14px;
                font-weight: bold;
                font-family: Bitstream Charter, Georgia, Times Romans, serif;
                float: left;
                margin: 8px 0 0;
            }
            &.place-only {
               .place-name {
                  float:none;
               }
               .dish-price,.dish-name,.dish-descriptio,.dish-notes {
                  display:none;
                  font-family: Bitstream Charter, Georgia, Times Romans, serif;
               }
            }

            span.dish-price {
               font-size: 12px;
               font-family: Bitstream Charter, Georgia, Times Romans, serif;
               color: #666;
               top: 25px;
               right: 0;
               position: absolute;
            }
            span.distance,
            span.address,
            span.phone,
            span.hours,
            span.dish-notes {
                float: left;
                padding: 0 10px 5px 0;
                font-size: 12px;
            }
            span.dish-description {
               color:#AAA;
               font-size:small;
            }
            span.address {
               color: #666;
            }
            span.distance {
               font-style: italic;
            }
            span.phone {
               color: #AAA;
               font-weight: bold;
            }
            span.hours {
               color: #999;
            }
            span.dish-notes {
               color: #999;
               font-size: 12px;
            }
        }
    }
}

移动端CSS：

/* =Media
-------------------------------------------------------------- */
div#results { width:100%; }
div#resultsListing { width:auto; }
div#bigmap { width:100%; height:100%; }

@media screen and (max-width: 480px) {
    #header {
        padding: 0 0 0 12px;
        h1 {
            margin: 5px 10px 0 0;
            width: 18px;
            height: 27px;
            a {
                background: url(../images/logo-mobile.png) no-repeat scroll left top;
                float: left;
                width: 18px;
                height: 28px;
                text-indent: -9999px;
            }

        }

        div#header_search {
            border-right: 1px solid #E8E8E2;
            margin: 0;
            padding: 0 14px 0 0;
            width: 132px;
            input#searchbox {
                width: 122px;
                padding: 0 4px;
                margin: 5px 0 5px;
                font-size: 12px;
            }
            span#header_near_label {
                display: none;
            }
        }

        div#mobile-buttons {
            a.map-view {
                background: url(../images/map-view.png) no-repeat scroll left top;
                border-right: 1px solid #E8E8E2;
                float: left;
                width: 31px;
                height: 36px;
                text-indent: -9999px;
            }
            a.list-view {
                background: url(../images/list-view.png) no-repeat scroll left top;
                float: left;
                width: 31px;
                height: 36px;
                text-indent: -9999px;
            }
        }
    }

    div#results {
        width: 100%;
    }

    div#resultsListing {
        width: auto;
        margin-left: 10px;

        .dish-name {
            font-size: 14px !important;
            font-family: Bitstream Charter, Georgia, Times Romans, serif;
        }
        .place-name {
            font-size: 12px !important;
            font-family: Bitstream Charter, Georgia, Times Romans, serif;
            margin: 2px 0 0;
        }
        .dish-price {
            font-size: 12px !important;
            font-family: Bitstream Charter, Georgia, Times Romans, serif;
        }
    }
}

- alexchenco

Answer 1

我假设你的样式表是这样结构的，移动样式表从主样式表继承而来，而不是完全分离。在这种情况下，你可能遇到了 Android 浏览器中的一个 bug，它将 overflow:auto 和 overflow:scroll 视为 overflow:hidden。

我不知道有没有解决方法；你可能需要重新设计适用于移动端的页面。

- redjen

Answer 2

原来在 WebKit 移动端存在一个问题，即不支持使用 overflow:scroll 或 overflow:auto 滚动内部 div。您必须在这些平台上实现自己的滚动。只有整个页面滚动是本地支持的。

有一些 JavaScript 库可用于帮助解决此问题，例如：

• http://cubiq.org/iscroll
• https://github.com/davidaurelio/TouchScroll
• https://github.com/neave/touch-scroll

根据我的经验，这些解决方案的性能不如本地滚动支持好，因为它们更能够平滑地进行动画。我建议改变布局，以便您可以使用整页滚动而不是overflow:scroll或overflow:auto。

- Dobes Vandermeer