主页 / 问题 / 668379
Accepted
Eugen Eray
Asked:2020-05-20 15:46:41 +0000 UTC2020-05-20 15:46:41 +0000 UTC

如何在页面上设置滚动条的样式

  • 772

我在Essential template里看到这个，想问一下怎么给右边的scrollbar设置样式？这是一张照片。他是蓝色的，在她身上更厚，而不是标准的。图片： 在此处输入图像描述

html

1 个回答

  1. Best Answer

    如果你只使用 css，你可以为 -webkit 和 ie 设置样式（对于 ie，并不是所有的样式选项都像 -webkit 中那样）

    对于 firefox，唉，没有样式 - https://bugzilla.mozilla.org/show_bug.cgi?id=547260

    例子

    *{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  min-height: 2000px;
  /* style for ie */
  scrollbar-base-color: #26ACD3;
  scrollbar-3dlight-color: #26ACD3;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: #26ACD3;
  scrollbar-shadow-color: #26ACD3;
  scrollbar-dark-shadow-color: #26ACD3;
}
/* style for -webkit- */
body::-webkit-scrollbar {
    width: 20px;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(15,67,83,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: #26ACD3;
  outline: 1px solid #000;
}
nav{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 70px;
  background: #26ACD3;
}
    <nav></nav>

    • 1

相关问题