手机小屏和点击事件跳转到页面顶部的问题答案

【问题标题】：Issue involving small mobile screen and click event jumping to the top of page手机小屏和点击事件跳转到页面顶部的问题
【发布时间】：2020-03-10 15:45:26
【问题描述】：

我已经在我的 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 和overflow 滚动到主容器，如下所示：

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

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

【问题讨论】：

如果您添加preventDefault()，它会持续存在吗？例如; (click)="likeOrUnlikePost();event.preventDefault()"
我实际上将 $event 传递给该方法并尝试了 .preventDefault() 和 .stopPropagation() 但都没有奏效。不过我不知道你可以这样做，那很整洁。不幸的是，我仍然有这个问题。
@ChrisW。如果您查看我的编辑，我暂时修复了 3。知道这是否与路由器插座有关吗？
哦，对不起，我没有注意到你的-webkit-overflow-scrolling，这是一个 ios 显式前缀，如果我没记错的话，它会自动为 chrome 和 touchmove 添加事件监听器safari 类似的东西在子元素中可能会导致您所看到的。您是否偶然在文档级别指定 html { height: 100%; width: 100%; overflow: auto } ？无论哪种方式都非常积极，这不是一个有角度的事情。
@ChrisW。好吧，我添加了 webkit-overflow-scrolling 希望它能解决问题。但是我删除了它并尝试了 .preventDefault() ，它仍然存在滚动到容器顶部的原始问题。在文档级别我有。 html, 身体 { 高度：100%; }

标签： javascript angular ng-zorro-antd

【解决方案1】：

我在 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;
}

【讨论】：