Allenice

Appearance

翻页、切换排序方式时，都会向后端发起数据请求，然后前端拿到数据更新 DOM，在更新 DOM 的时候，会出现短暂的跳动，滚动条会在更新 DOM 的时候因为容器内容高度不够(loading 动画高度不够)而消失很短暂的时间，然后 DOM 更新好后，又出现。

  • 这里不能强制设置内容高度设得很大，因为用户浏览器高度未知，有些用户浏览器高度很大，在切换时，滚动条依然会消失一段时间。
  • 也不能设置overflow-y: scroll;，因为当数据量小的时候，不需要滚动条。

所以在进行设计的时候，就要考虑滚动条的存在，预留好滚动条的宽度！！

方案一：去掉滚动条。 ​

CSS
.content-wp{
    -ms-overflow-style: none; // IE 10+
    scrollbar-width: none; // Firefox
    &::-webkit-scrollbar{ //Chrome safari
        display: none;
    }
}
.content-wp{
    -ms-overflow-style: none; // IE 10+
    scrollbar-width: none; // Firefox
    &::-webkit-scrollbar{ //Chrome safari
        display: none;
    }
}

方案二：定位 ​

给会发生跳动的元素加上相对定位，设置left:0; width:calc(100vw - 12px);，这里的 12px 是滚动条宽度。

定位的话，就不会产生跳动了。

滚动条宽度计算 ​

js
// 采用单例实现
let scrollBarWidth;
export default function () {
    if (scrollBarWidth !== undefined) return scrollBarWidth;

    const outer = document.createElement("div");
    outer.style.overflow = "scroll";
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.height = "100%";
    outer.style.position = "absolute";
    outer.style.top = "-9999px";
    document.body.appendChild(outer);

    const widthNoScroll = outer.offsetWidth;

    const inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);

    const widthWithScroll = inner.offsetWidth;
    outer.parentNode.removeChild(outer);
    scrollBarWidth = widthNoScroll - widthWithScroll;
    return scrollBarWidth;
}
// 采用单例实现
let scrollBarWidth;
export default function () {
    if (scrollBarWidth !== undefined) return scrollBarWidth;

    const outer = document.createElement("div");
    outer.style.overflow = "scroll";
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.height = "100%";
    outer.style.position = "absolute";
    outer.style.top = "-9999px";
    document.body.appendChild(outer);

    const widthNoScroll = outer.offsetWidth;

    const inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);

    const widthWithScroll = inner.offsetWidth;
    outer.parentNode.removeChild(outer);
    scrollBarWidth = widthNoScroll - widthWithScroll;
    return scrollBarWidth;
}