Question

我正在尝试使用自定义滚动条模拟Windows Chrome滚动条。我非常亲密。剩下的就是在滚动条拇指朝上时停止滚动条按钮上的悬停事件。我已经写了一个jquery来在拇指抵住按钮时更改按钮图像，因此我认为将$(this).unbind('mouseenter mouseleave');添加到scroll()函数中相当容易，但是“ this”必须等于{{1} }，我不知道该怎么做。到目前为止，这就是我想要的内容，包括我想要的取消绑定和绑定语句，这些语句现在无效：

body.scrollbar.up::-webkit-scrollbar-button:single-button:vertical:decrement

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      $("body").removeClass("up");
      $(this).bind('mouseenter mouseleave');
    } else {
      $("body").addClass("up");
      $(this).unbind('mouseenter mouseleave');
    }    
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $("body").addClass("down");
       $(this).unbind('mouseenter mouseleave');
    } else {
      $("body").removeClass("down");
      $(this).bind('mouseenter mouseleave')
    }  
  });
});

body.scrollbar::-webkit-scrollbar {
    width: 17px;
    background-color: rgba(240, 240, 240);
}

body.scrollbar::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    background-clip: content-box;
}
body.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #a3a3a3;
}

body.scrollbar::-webkit-scrollbar-thumb:active {
    background-color: #505050;
}

body.scrollbar::-webkit-scrollbar-button:single-button {
    display: block;
    height: 17px;
}

/* Up */
body.scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowup.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}
body.scrollbar.up::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowupup.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}

body.scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowuphov.jpg);
}

/* Down */
body.scrollbar::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdown.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}
body.scrollbar.down::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdowndown.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}

body.scrollbar::-webkit-scrollbar-button:vertical:single-button:increment:hover {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdownhov.jpg);
}

我还将代码放入了codeply snippet

Answer 1

我的解决方案是在滚动顶部时添加另一个类top，在滚动底部时添加bottom。

然后对于悬停CSS，使用:not(.top)和:not(.bottom)来声明仅在未分别应用top和bottom时才应用该悬停。

在页面加载时，如果页面的顶部或底部，我还添加了相应的类。

$(document).ready(function() {
if ($(document).scrollTop() == 0) {
      $("body").addClass("up top");
}
else if($(window).scrollTop() + $(window).height() == $(document).height()) {
  $("body").addClass("down bottom");
}
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      $("body").removeClass("up top");
      $(this).bind('mouseenter mouseleave');
    } else {
      $("body").addClass("up top");
      $(this).unbind('mouseenter mouseleave');
    }    
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $("body").addClass("down bottom");
       $(this).unbind('mouseenter mouseleave');
    } else {
      $("body").removeClass("down bottom");
      $(this).bind('mouseenter mouseleave')
    }  
  });
});

body.scrollbar::-webkit-scrollbar {
    width: 17px;
    background-color: rgba(240, 240, 240);
}

body.scrollbar::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    background-clip: content-box;
}
body.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #a3a3a3;
}

body.scrollbar::-webkit-scrollbar-thumb:active {
    background-color: #505050;
}

body.scrollbar::-webkit-scrollbar-button:single-button {
    display: block;
    height: 17px;
}

/* Up */
body.scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowup.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}
body.scrollbar.up::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowupup.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}

body.scrollbar:not(.top)::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowuphov.jpg);
}

/* Down */
body.scrollbar::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdown.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}
body.scrollbar.down::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdowndown.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}

body.scrollbar:not(.bottom)::-webkit-scrollbar-button:vertical:single-button:increment:hover {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdownhov.jpg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body style="height:1550px;" class="scrollbar up">

<p>Scroll down this page.</p>

<p style="position:fixed;">Scroll the page and see the scrollbar look and function exactly the same as the stock windows version of Chrome scrollbar.  Hover the arrow buttons and see them change.  Now help me kill that hover effect when the scrollbar-thumb is up against the arrow buttons, just like the real chrome scrollbar.</p>

</body>

使用自定义滚动条模拟Chrome滚动条-在滚动条按钮上禁用悬停事件

1 个答案: