在移动设备上，页面标签的滚动可能会出现明显的抖动，这种情况会对用户体验造成负面影响。 但是 Progressive Web App (PWA) 的出现，在一定程度上解决了页面滚动时抖动的问题。
PWA 简介
PWA是一种新型的Web应用程序，它可以像一个本地应用程序一样工作，可以安装在用户的设备上，具有离线模式、推送通知等特性。
在PWA中，使用了一种称之为“App Shell”的设计模式，它是一种最小化的页面架构，用于管理应用程序样式、布局和导航等组件。 通过使用App Shell，PWA 可以快速加载，提供优化的浏览器性能和用户体验。
PWA采用了一种名为“overscroll-behavior”的新的CSS属性，能够帮助开发人员解决页面标签滚动时的抖动问题，具体示例如下：
body {
overscroll-behavior: contain;
}这表示当用户达到滚动的边缘时，页面将不再尝试滚动，从而避免页面的抖动问题。 但API仍然处于实验阶段，目前只有Chrome和Firefox浏览器支持该属性。
学习和指导意义
通过使用PWA，Web应用程序可以在移动设备上实现更好的性能和用户体验。 随着HTML5和Web API的不断发展，PWA的功能和性能将日益增强。
在Web开发中，了解新技术和API的使用非常重要。学习和使用PWA技术可以帮助我们进一步改进和提升网站和Web应用程序的性能和用户体验。中后台管理系统大多采用厚客户端，目前厚客户端也在采用这类 PWA 技术。
结论
PWA 的出现，解决了移动设备上页面标签滚动时抖动的问题，同时也为Web应用程序在性能、可靠性和用户体验方面提供了更多的优化和改进空间。 使用“overscroll-behavior”属性可以避免页面滚动问题，有助于实现更好的用户体验。Web前端工程师也应该不断学习和掌握新技术，提升自己的能力和水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747e1db5883fc5ebfe78b38