使主滚动条始终可见

当用户访问网页时(当页面没有足够的内容来触发滚动条的激活时),浏览器的垂直滚动条需要什么样的CSS才能显示？

1> Corv1nus..：

---

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

这使滚动条始终可见,并且仅在需要时才激活.

更新:如果上述方法不起作用,可以使用此方法.

html {
    overflow-y:scroll;
}

---

你知道什么版本的FF支持`overflow-y`吗？似乎不推荐使用`-moz-scrollbars-vertical`来支持`overflow-y`属性.

---

当您网站上的某些网页太小而无法使用滚动条而其他网页时,是否有"跳页"的替代方法？或者这是"最佳做法"？我不得不承认,我没有在网页上看到很多页面没有整页.

---

我不确定这是否是最佳做法,但是,在所有页面上都有滚动条,并且仅在必要时激活,以避免页面跳转通常是可接受的解决方案.我更倾向于在跳跃上使用常量滚动条.

2> Ionuț G. Sta..：

---

html {
    overflow-y: scroll;
}

那是你要的吗？

遗憾的是,Opera 9.64似乎在应用于HTML或忽略了CSS声明BODY,尽管它适用于其他块级元素DIV.

3> Frank Lämmer..：

---

事情在过去几年发生了变化.以上答案在任何情况下都无效.苹果正在推动各地消失的滚动条.MacO(和iOs)上的Safari,Chrome甚至Firefox只在实际滚动时显示滚动条 - 我不知道当前的Windows/IE.然而,有一些非标准方法可以在Webkit上设置滚动条的样式(IE很久以前就丢弃了).

---

感谢消失的滚动条上的这个优点.对我来说,保持滚动条可见的原因是为了避免这种轻微但非常引人注意且非常烦人的混蛋,因为内容从滚动变为不.随着消失的滚动条,当它们显示和隐藏时它们不会使身体猛拉,所以它对我来说是好的.但是感谢这个优点.

---

从UX的角度来看,我们大多数时候都希望滚动条可见.根据当前趋势,如果滚动条不可见,则必须在列表中"试用"可见列表以获取更多内容.如果人们看到滚动条,则不需要下拉列表或列表中包含更多项目的附加视觉线索.

4> molls223..：

---

确保溢出设置为"滚动"而不是"自动".话虽如此,在OS X Lion中,设置为"滚动"的溢出行为更像汽车,因为滚动条仍将仅在使用时显示.因此,如果上述任何解决方案似乎不起作用,那可能就是原因.

这是您需要解决的问题:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

如果您不喜欢默认设置,可以相应地设置样式.

5> Marco Demaio..：

---

html {height: 101%;}

我使用这个跨浏览器解决方案 (注意:我总是在第一行使用DOCTYPE声明,我不知道它是否在quirksmode中工作,从未测试过它).

这将始终在每个页面中显示ACTIVE垂直滚动条,垂直滚动条将仅可滚动几个像素.

当页面内容比浏览器的可见区域(视图端口)短时,您仍然会看到垂直滚动条处于活动状态,并且它只能滚动几个像素.

如果您通过使用此解决方案痴迷于CSS验证(我只对HTML验证感到满意),您的CSS代码也会验证W3C,因为您没有使用非标准CSS属性,例如 -moz-scrollbars-vertical

6> 小智..：

---

body { height:101%; } 将"裁剪"更大的页面.

相反,我使用:

body { min-height:101%; }

---

这个答案确实提供了其他答案中未提供的其他信息.