相关疑难解决方法(0)

我最近一直在研究移动网络应用程序.我正在优化移动优先,现在专注于iPhone的iOS.我不想要原生应用程序的精确外观,但我认为原生的感觉是绝对重要的.我已经制作了标记和CSS以反映这个想法,让我留下这个(注释以更好地理解我后来遇到的问题):

这一切都没有问题,它还具有原生的感觉,静态页眉和页脚,以及可滚动的内部视图(由于-webkit-overflow-scrolling: touch).

任何使用iOS超过5分钟的人都知道,当你向上或向下滚动时,你会得到一些不错的动力滚动.此外,当您点击列表顶部时,您会获得良好的"反弹"效果:

我觉得这有助于定义iOS的感觉,这么小的细节可以走很长的路.幸运的是,如果您位于webapp中可滚动元素的列表顶部之下,并滚动到顶部,则会获得相同的效果.这是期望的行为:

但是,当您位于列表顶部并尝试重新创建相同的弹跳行为时,列表顶部(例如上面的设置.app),我们会得到以下行为,这是不希望的:

我在Stack Overflow上看过一些类似的 问题,但这些都选择禁用弹跳.我想知道是否可以保持弹跳,但总是让它发生body section section#main,而不是在webapp的chrome上.我不是在使用jQuery,所以我更喜欢使用直接JavaScript的答案(尽管CSS解决方案的奖励积分).

这是一个包含所有代码的GitHub 仓库(Sinatra,HAML和Sass;当前分支so),或者是带有损坏图像和链接的JSFiddle,但在iPhone上显示问题(最好添加到主屏幕进行测试).

我正在创建一个iPhone Web应用程序,你现在,因为iOS5,能够使用position:fixed; 标题等

虽然它有效但是如果你向上滚动页面的顶部,它会显示通常的灰色区域一段时间,然后你就不能再滚动了

有没有办法阻止这种滚动？我尝试过像溢出这样的东西:隐藏; 但我似乎找不到任何东西.

PS我只想要一件事停止滚动,我有一个名为#container的div,我仍然希望能够滚动.

我正在构建一个离子应用程序,其中我在标题中添加了工具栏,它有5个按钮来导航.但是当我在浏览器设备上尝试代码时,水平滚动对于工具栏工作正常,但在实际设备中,它将无法正常工作.有时它滚动,有时它不会.下面是相同的代码.

<ion-header>
  <ion-navbar color="light">
    <ion-title>Home</ion-title>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
      <button ion-button icon-only>
        <ion-icon name="cart"></ion-icon> 
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar color="light">
    <ion-buttons>
      <button ion-button clear>{{'All'|translate}}</button>
    </ion-buttons>
    <ion-buttons *ngFor="let facet of parentCategories">
      <button ion-button [ngClass]=" {'active' : selectedFacet == facet}">{{facet}}
      </button>
      <button ion-button icon-only clear class="accordion" (tap)="getSubFacets(facet);accordion(event)" *ngIf="selectedFacet == facet"><ion-icon name="ios-arrow-down"></ion-icon></button>
    </ion-buttons>
    <div id="sub-category" class="sub-category">
      <ion-buttons *ngFor="let subFacet of childCategories">
        <button ion-button [ngClass]=" {'active' : selectedSubFacet == subFacet}" (tap)="getFilteredProducts('categoryFacet',subFacetMap.get(subFacet), selectedFacet, subFacet)">
          {{subFacet}}</button>
      </ion-buttons>
    </div>
  </ion-toolbar>
</ion-header>

CSS:

.toolbar-content { …