46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<div id="app">
|
|
<router-view/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'App',
|
|
mounted() {
|
|
// 页面加载/刷新时强制滚到顶部(配合 router scrollBehavior 双保险)
|
|
if ('scrollRestoration' in history) {
|
|
history.scrollRestoration = 'manual'
|
|
}
|
|
window.scrollTo(0, 0)
|
|
// 二次兜底:DOMContentLoaded 后再滚一次
|
|
window.addEventListener('load', () => window.scrollTo(0, 0))
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" src="./assets/common.css">
|
|
</style>
|
|
<style>
|
|
/* 兜底:任何子元素(含 position:absolute 越界元素)都不会撑出横向滚动条 */
|
|
html,
|
|
body,
|
|
#app {
|
|
overflow-x: hidden;
|
|
}
|
|
/* 滚动条只显示在 <html> 一处:
|
|
- body 强制 overflow:hidden,不让 body 自己产生垂直滚动条
|
|
- html 保持默认(visible/auto),只产生一条滚动条
|
|
这样避免同时出现 html + body 两条滚动条的"双滚轮"问题 */
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
/* 滚动丝滑:滚轮/触摸板触发原生平滑滚动(浏览器内置 60fps 插值,无 JS 开销) */
|
|
/* will-change scroll-position:把整个页面推到独立合成层,scroll 重算时只更新这个层,
|
|
不再触发 .page (152.4rem 大容器) 内部 position:absolute 元素的 reflow */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
will-change: scroll-position;
|
|
}
|
|
</style>
|