时间戳

首页 > 解决方案 > 如何使用 css 使 webkit 滚动条居中

css - 如何使用 css 使 webkit 滚动条居中

问题描述

嗨，我正在尝试将 webkit 滚动条居中到我的内容上方的页面中心。我也希望它高于我的内容。我添加了我想要实现的线框图像：线框图像

/*VERTICAL SCROLLBAR*/

::-webkit-scrollbar {
z-index: 99999;
 width:20px;
 background:#222;

  
}

::-webkit-scrollbar-thumb {

  background: rgba(0,155,221,1); 
  box-shadow:0 -100vh 0 100vh rgba(0,155,221,1);
border-radius: 10px;
}

谢谢！

标签： csswebkitscrollbar

解决方案

我可以给你一些提示，这样你就可以自己尝试了：

  1. 隐藏原始滚动条。
  2. 创建一个 div 并将其放在页面的中心。
  3. 制作一个 JS 函数来计算用户滚动了多少。
  4. 根据你得到的值改变 div 的高度。

一些重要的事情要知道：

  1. document.documentElement.offsetHeight- 返回页面的全高
  2. window.pageYOffset- 返回用户滚动了多少像素。
  3. 您可以通过获取比率(scrolledHeight/totalHeigth)*100并将其设置为高度%。

推荐阅读