0

我已经在我的 iPhone 8+ 上对此进行了测试，但问题不存在。它也不会发生在我测试过的任何计算机上。

但是，当我在 chrome 或 safari 中使用 iPhone 6 iOS 12.4 时，当我单击按钮或带有角度（单击）的 div 时，它会跳到最顶部。我无法使用浏览器中的开发人员工具复制它。

不，我没有使用标签。我见过的所有示例都与 a 标签中的 # 有关。

其中一个元素的 html 如下所示：

<i
     nz-icon
     nzType="heart"
     [nzTheme]="
     postService.userLikesPost.value ? 'fill' : 'outline' "
     (click)="likeOrUnlikePost()"
      ></i>

我觉得它与屏幕尺寸有关，但一切都可以很好地适应页面。没有横向滚动或任何东西，按钮所做的只是向 api 发送一些东西。另一个（点击）我有一个向下切换，但这也将用户发送到顶部。另一个是在 div 上展开并再次将用户发送到顶部。

知道是什么原因造成的吗？同样在 iphone 8+ 上没有问题，只是较小的 6。我确实设法打开了 xcode 模拟器，但它只下降到 iphone8 并且没有任何问题。

我也碰巧在使用 ngx-infinite-scroll 但我不认为这是导致问题的原因，因为它会在两个设备上发生。

编辑：发现手机是 ios 12 上的 iphone 6。它在 XR 和 iphone 8、8+ 和 Nexus 上运行良好

编辑 2：我已经将我的 xcode 模拟器设置为使用 ios12.4，这似乎是问题所在。因为它适用于 ios 13 iphone 7 但不适用于 iphone 7 ios 12.4... 这可能是 angular 8 和 ios 12.4 问题吗？我将尝试忽略事件默认行为，看看是否有效。

编辑3：我已经缩小了问题的范围。滚动容器位于路由器插座内。所以外部的html看起来像这样。

<div class="main-container">
  <app-ui-navigation-header class="top-banner"></app-ui-navigation- 
  header>
   <div class="navigation-container" #navigationContainer>
     <div class="router">
        <router-outlet></router-outlet>
     </div>
     <div class="bottom-container">
        <app-ui-bottom-banner></app-ui-bottom-banner>
     </div>
  </div>
</div>

对于我拥有的 css

.main-container {
  background-color: $off-white;
  display: grid;
  grid-template-rows: .15fr 1fr;
  height: 100%;
 }

.navigation-container {
  grid-row: 2 / 3;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

但随后我将 overflow-y: auto 和溢出滚动到主容器，如下所示：

.main-container {
  background-color: $off-white;
  display: grid;
  grid-template-rows: .15fr 1fr;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

它工作得很好。我想保留标题并让 .navigation-container 滚动。但我正在取得进展。

4

1 回答 1

0

我在 iOS 12.4 上单击 iFrame 中的按钮时遇到了类似问题，并找到了适合我的解决方案。每次我点击输入按钮时，屏幕都会向上滚动。一旦我为 html 和 body 标签设置了高度、溢出和滚动，它就被修复了。通过我的 xCode 模拟器运行时，所有 iOS 12.4 iPhone iOS 都会发生这种情况。

html, body {
  height: 100%;
}
html {
  overflow: hidden;
}
body {
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
于 2020-04-30T18:43:38.410 回答