如何移动Web浏览器滚动条和样式（CSS）？ [英] How Can I Move the Web Browsers Scrollbar and Style It (CSS)?

问题描述

访问我目前正在工作的网站时，您会立即注意到，当您滚动浏览博客帖子时，位于浏览器顶部的栏会跟随您。我想知道是否有任何方法，我可以用来移动滚动条下面的栏，而不是旁边，然后风格的栏，以适应网站的风格。

Upon visiting the site that I'm currently working on you would immediately notice the fact that a bar placed at the top of your browser follows you down as you scroll through the blogs posts. I was wondering if there was any method which I could use to both shift the scrollbar below the bar rather than beside it and then style the bar to suit the sites style.

图片：

推荐答案

您可以使用jquery和一些javascript来移动滚动条。在这个例子中，我使用jquery动画逐渐向下滚动：

You can move the scrollbars with jquery and some javascript. On this example I use a jquery animation to gradually scroll down:

//move the scroll 800 pixels down in 200 milliseconds
$('html,body').animate({scrollTop: 800}, 200, "swing");

为了风格化滚动条，可以使用css：

In order to stylize scrollbars, you can use this css:

body {
  scrollbar-face-color: #FDCF66;
  scrollbar-highlight-color: #FDCF66;
  scrollbar-3dlight-color: #FDCF66;
  scrollbar-darkshadow-color: #FDCF66;
  scrollbar-shadow-color: #FDCF66;
  scrollbar-arrow-color: #FDCF66;
  scrollbar-track-color: #FDCF66;
}

这是这些颜色的含义（来源）：

This is what these colors mean (source):

我不确定这是标准的CSS，所以一些导航器可能不支持它。

I'm not sure this is standard CSS, though, so some navigators might not support it.

这篇关于如何移动Web浏览器滚动条和样式（CSS）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！