Question

我希望默认使用一个小的滚动条，并且当滚动条悬停时，它应该具有正常的大小。

这很好用，除了当仅滚动滚动条轨道时，只有轨道会延伸并且拇指保持一半大小。

我尝试了类似+〜的选择器来在轨道悬停时更改拇指大小，但是它们在这里不起作用，所以我尝试使用JavaScript来实现运气。

每次光标靠近滚动条时，我都会向主体添加一个类，如果光标距离滚动条超过5px，则将其删除。因为那不起作用，所以我还添加了一个相反的类，但是当这些类正确更改时，仅当您将鼠标悬停在滚动条上时样式才会更新，从而无法更改。

这是代码（我对其进行了一些编辑，因此即使在jsfiddle中，您也可以最好地看到问题）：http://jsfiddle.net/timlg07/k697nxdv/

window.addEventListener("mousemove", (evt) => {
  if (evt.clientX >= (document.body.clientWidth - 5)) {
    document.body.classList.add("scrollbar-hover");
    document.body.classList.remove("scrollbar-normal");
  } else if (document.body.classList.contains("scrollbar-hover")) {
    document.body.classList.remove("scrollbar-hover");
    document.body.classList.add("scrollbar-normal");
  }
});

body::-webkit-scrollbar {
  background: transparent;
  width: 16px;
}

body.scrollbar-normal::-webkit-scrollbar-track {
  background: transparent;
}

body.scrollbar-hover::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.3);
}


/* THUMB: */

body.scrollbar-normal::-webkit-scrollbar-thumb {
  border-radius: 2%;
  /* background simulating half width (width can't be changed onhover) + hover-trigger gets bigger */
  background: -moz-linear-gradient(left, rgba(188, 188, 188, 0) 0%, rgba(188, 188, 188, 0) 50%, rgba(188, 188, 188, 1) 51%, rgba(188, 188, 188, 1) 95%, rgba(188, 188, 188, 0) 96%, rgba(188, 188, 188, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(188, 188, 188, 0) 0%, rgba(188, 188, 188, 0) 50%, rgba(188, 188, 188, 1) 51%, rgba(188, 188, 188, 1) 95%, rgba(188, 188, 188, 0) 96%, rgba(188, 188, 188, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(188, 188, 188, 0) 0%, rgba(188, 188, 188, 0) 50%, rgba(188, 188, 188, 1) 51%, rgba(188, 188, 188, 1) 95%, rgba(188, 188, 188, 0) 96%, rgba(188, 188, 188, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bcbcbc', endColorstr='#00bcbcbc', GradientType=1);
  /* IE6-9*/
}

body.scrollbar-hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.75);
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

<body class="scrollbar-normal" style="background:#333">

  <div style="height:300vh;width:70vw;margin:auto;background:#aaa">sample content</div>

</body>

滚动条在类更改时未更改

0 个答案: