css 判断滚动条

CSS 判断滚动条是一个非常有用的技巧，可以根据滚动条的位置或高度来改变页面元素的样式或行为。

  /* CSS 中判断滚动条的位置 */
  body::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }
  body::-webkit-scrollbar-thumb:vertical {
    height: 50px;
  }

上面的代码表示，在 body 标签内设置滚动条样式，其中 ::-webkit-scrollbar-thumb 表示滚动条上的滑块，:vertical 表示垂直滚动条，并设置滑块的颜色和高度。

  /* CSS 中判断滚动条的高度 */
  .container {
    overflow-y: scroll;
  }
  .container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
  }
  .container::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }
  .container::-webkit-scrollbar-thumb:vertical {
    height: calc(100% / var(--item-count));
  }

上面的代码表示，在类名为 container 的元素中设置滚动条样式，其中 overflow-y: scroll; 表示允许垂直滚动，::-webkit-scrollbar-track 表示滚动条的背景，::-webkit-scrollbar-thumb 表示滑块的颜色，:vertical 表示垂直滚动条，并设置滑块高度为容器高度除以元素个数。

通过以上代码，可以看出 CSS 判断滚动条的方法非常灵活，可以改变滚动条的颜色、大小、位置等属性，为页面增添更多的交互效果。