Question

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

当我在桌面计算机中缩小浏览器窗口时，滚动条显示完好（光标下方的那个）：

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

有任何解决此问题的建议吗？

enter image description here

代码：

搜索结果的默认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 for mobile：

/* =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;
        }
    }
}

Answer 1

我假设您的样式表是结构化的，以便移动样式表继承自main，而不是完全分离。在这种情况下，您可能遇到了Android浏览器中的一个错误，该错误处理溢出：auto和overflow：滚动为overflow：hidden。

我不知道有解决方法;您可能想要重新格式化移动页面。

Answer 2

原来WebKit mobile存在一个问题，它不支持使用overflow：scroll或overflow：auto滚动内部div。您必须在这些平台上实现自己的滚动。本机仅支持整页滚动。

有一些javascript库可以帮助解决这个问题，例如：

根据我的经验，这些解决方案的性能不如原生滚动支持，因为它们能够更好地平滑动画。我建议更改布局，以便您可以使用整页滚动而不是溢出：滚动或溢出：自动。

滚动条在Android中消失了吗？

2 个答案: