短短几行css代码实现滚动条效果

如何实现使用css实现滚动条效果

实现效果，运用线性渐变来实现功能

假设我们的页面被包裹在 <body> 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：

body {

    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);

    background-repeat: no-repeat;

}

实现的效果：

运用伪类实现把多出来的部分遮住：

body::after {

    content: "";

    position: fixed;

    top: 5px;

    left:;

    bottom:;

    right:;

    background: #fff;

    z-index: -1;

}

实际的效果是：

但是滚动到底部，进度条没有到底部，究其原因，是因为 body 的线性渐变高度设置了整个 body 的大小，我们调整一下渐变的高度：

body {

    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);

    background-size: 100% calc(100% - 100vh + 5px);

    background-repeat: no-repeat;

}

+5px则是滚动进度条的高度，预留出5px的高度：

摘自掘金：https://juejin.im/post/5c35953ce51d45523f04b6d2

巴特西

短短几行css代码实现滚动条效果

最新文章

热门文章