jquery 滚动条css动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Scrollbar Animation</title>
<style>
  /* 基础样式 */
  body {
    height: 2000px;
  }
  .scrollbar {
    width: 10px;
    background-color: #ddd;
  }
  .scrollbar:hover {
    background-color: #aaa;
  }
  /* 关键帧动画 */
  @keyframes scrollAnimation {
    from { width: 10px; }
    to { width: 20px; }
  }
  .scrollbar.animate {
    animation: scrollAnimation 1s infinite alternate;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // 监听滚动事件
    $(window).scroll(function() {
      if ($(window).scrollTop() > 100) {
        $('.scrollbar').addClass('animate');
      } else {
        $('.scrollbar').removeClass('animate');
      }
    });
  });
</script>
</head>
<body>
<div class="scrollbar"></div>
</body>
</html>

.scrollbar.animate {
  animation: scrollAnimation 1s infinite alternate;
  transform: translateZ(0); /* 强制硬件加速 */
}