解决双滚动条聚焦问题

解决双滚动条聚焦问题

目录

解决双滚动条聚焦问题

背景

现象：

研究后解决方案

---

背景

做了个简单的页面，页面一屏内容展示不下，会有滚动。页面内部会有个小区域也有滚动区域。导致出现两个滚动区域。

现象：

当滚动内层滚动条(聚焦内层滚动条)，需要过一段时间才能滚动外层滚动条，表现出来类似卡顿，用户体验极差

研究后解决方案

html,
body {
    font-size: 24px;
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;

    user-select: none;

    overflow-x: hidden;
    position: fixed;
    overscroll-behavior: none;
}
::-webkit-scrollbar {
    display: none;
}

将html 和 body 设置为如下属性

overflow-x: hidden;

position: fixed;

overscroll-behavior: none;