2011-10-07 112 views
3

我使用媒体查询来建立这个网站的移动版本:http://www.foodjing.com/滚动条消失在Android?

当我缩小我的浏览器窗口,在我的台式电脑的滚动条显示完美(一光标下):

但当该网站在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移动:

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

回答

1

我假设你的样式表结构化的 以便移动样式表从主体继承而不是完全分离。在这种情况下,您可能会遇到Android浏览器中的一个错误,该错误会将overflow:auto和overflow:scroll作为overflow:hidden。

我不知道这个解决方法;您可能需要重新设置手机页面的格式。

1

原因是WebKit mobile中存在一个问题,它不支持使用overflow滚动内部div:scroll或overflow:auto。你必须在这些平台上实现你自己的滚动。本机仅支持整个页面滚动。

有一些JavaScript库都来解决这个问题,比如:

根据我的经验,这些解决方案的性能不与原生滚动支持一样好,因为它们能够更好地进行动画制作。我建议更改布局,以便您可以使用整页滚动而不是溢出:滚动或溢出:自动。