在移动设备浏览器下页面滚动用户体验不佳

[logeeker]

我在使用iPhone和iPad，但是这个问题也许在安卓设备上也存在。

当浏览器的地址栏浮动的时候，页面的高度会有些问题。这个可能导致页面滑动不流畅，有的时候需要多次滑动才能看到最顶部或最底部的导航。

我的猜测是因为这一段inline css: style="height: calc(-51px + 100vh);"

在移动设备浏览器上，100vh不一定是浏览器的真实高度。

不清楚具体怎么修复这个问题，貌似替换成100dvh 或者 100% 就可以。需要测试。当然也有可能我完全猜错原因了。

[FishHawk]

是不是滑到底才能收起来地址栏，然后再滑到顶才能放出来地址栏？ 原因是网站的滚动条用的不是浏览器的滚动条，而是内嵌一层的。这是ui库决定的，我这边没什么简单的解决办法，除非重写NLayout。

[FishHawk]

还有一种方案是放弃网站本身的固定header，让它和下面的页面一起滚动。

[FishHawk]

突然想通了该怎么做，修了，试试看吧。

[logeeker]

@FishHawk 貌似首页没问题了，但是读文章的页面貌似还有这个问题。

貌似100vh在移动端上应该尽可能避免。我猜测这里也许可以改成100%而不是100vh。我没有尝试在本地把网页跑起来，所以不确定这个行不行。如果不行的话也可以尝试使用100dvh。大部分浏览器都应该已经支持dvh

https://github.com/FishHawk/auto-novel/blob/7f61d7ba024ffa4d4a321f7f13610e37d084a45f/web/src/layouts/ReaderLayout.vue#L33

<n-layout
        :native-scrollbar="false"
        :scrollbar-props="{ trigger: 'none' }"
        style="height: 100vh"
>

既然滑动是虚拟的，那么我觉得整个滑动的container应该和用户的浏览器窗口可视部分一样大。在移动端上，100vh不一定是用户浏览器的可视窗口高度。

[FishHawk]

@FishHawk 貌似首页没问题了，但是读文章的页面貌似还有这个问题。

貌似100vh在移动端上应该尽可能避免。我猜测这里也许可以改成100%而不是100vh。我没有尝试在本地把网页跑起来，所以不确定这个行不行。如果不行的话也可以尝试使用100dvh。大部分浏览器都应该已经支持dvh

https://github.com/FishHawk/auto-novel/blob/7f61d7ba024ffa4d4a321f7f13610e37d084a45f/web/src/layouts/ReaderLayout.vue#L33

<n-layout
        :native-scrollbar="false"
        :scrollbar-props="{ trigger: 'none' }"
        style="height: 100vh"
>

既然滑动是虚拟的，那么我觉得整个滑动的container应该和用户的浏览器窗口可视部分一样大。在移动端上，100vh不一定是用户浏览器的可视窗口高度。

不知道为什么这条回复收不到提醒。不过你说的对，所以现在干脆直接用系统的滚动条了。