Question

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

图像： alt text http://i45.tinypic.com/eqti7d.jpg

Answer 1

好吧，你可以将内容放在div中，然后限制div的高度以强制浏览器在那里放置滚动条（在div中滚动）。这样，页面适合浏览器窗口，但包含内容的div有自己的滚动条。

例如，当您提出问题时，这是Stack Overflow自己的相关问题列表中的样式：

"height:150px; overflow-y:scroll; overflow-x:clip;"

至于样式，我不确定这种解决方法是否可行。

所以基本上，你会在你的页面中有这个

––––––––––––––––––––
|      Header      |
|------------------|
|                  |
|        Div       |
|   with limited   |
|      height      |
|                  |
––––––––––––––––––––

请注意，此方法会使标题始终显示（除非标题+ div大于窗口大小，这会导致两个滚动条），因为标题实际上并未滚动过去。

Answer 2

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

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

为了设置滚动条的样式，您可以使用此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;
}

这就是这些颜色的含义（source）：

legend http://www.programacionweb.net/images/articulos/scrollgraph.gif

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

Answer 3

不，您将无法设置栏的样式，因为它属于浏览器，而不是网站本身。

Answer 4

您可以使用跨浏览器 FleXcroll 设置滚动条的样式，但无法移动它，它会根据页面的分辨率和结构自动调整。

Answer 5

这需要一些工作，但如何创建自己的（或使用第三方）滚动条而不是使用浏览器提供的滚动条功能？例如，如果您使主要部分隐藏溢出，然后使用自定义滚动条控制顶部位置，您可以实现您想要的效果。

如何移动Web浏览器滚动条和样式（CSS）？

5 个答案: