使用CSS垂直滚动div [英] Making a div vertically scrollable using CSS

问题描述

此

<div id="" style="overflow:scroll; height:400px;">

提供 div 用户可以在水平和垂直方向上滚动。

gives a div that the user can scroll in both in horizontally and vertically. How do I change it so that the div is only scrollable vertically?

推荐答案

如果我们改变它，除了使用错误的属性。滚动条可以使用任何属性 overflow ， overflow-x 或 overflow-y ，每个可以设置为 visible ， hidden ， scroll ， auto 或继承。您目前正在查看这两个：

You have it covered aside from using the wrong property. The scrollbar can be triggered with any property overflow, overflow-x, or overflow-y and each can be set to any of visible, hidden, scroll, auto, or inherit. You are currently looking at these two:

• auto 将查看框的宽度和高度。如果它们被定义，它不会让框扩展超过这些边界。

• auto - This value will look at the width and height of the box. If they are defined, it won't let the box expand past those boundaries. Instead (if the content exceeds those boundaries), it will create a scrollbar for either boundary (or both) that exceeds its length.

scroll - 此值强制滚动条，无论什么，即使内容没有超过边界集。如果内容不需要滚动，该栏将显示为已停用或非互动。

scroll - This values forces a scrollbar, no matter what, even if the content does not exceed the boundary set. If the content doesn't need to be scrolled, the bar will appear as "disabled" or non-interactive.

如果您始终要显示垂直滚动条：

If you always want the vertical scrollbar to appear:

您应该使用 -y：scroll 。不管是否需要，此强制纵向轴显示滚动条。如果你不能滚动上下文，它将显示为一个禁用滚动条。

You should use overflow-y: scroll. This forces a scrollbar to appear for the vertical axis whether or not it is needed. If you can't actually scroll the context, it will appear as a"disabled" scrollbar.

如果你只想滚动一个滚动条，方框：

只需使用 overflow：auto 。因为你的内容默认情况下，当它不能适应当前行，打破到下一行，水平滚动条不会被创建（除非它在一个元素有关闭包装）。对于垂直条，它将允许内容展开到您指定的高度。如果超过该高度，它将显示一个垂直滚动条来查看其余内容，但如果它不超过高度，则不会显示滚动条。

Just use overflow: auto. Since your content by default just breaks to the next line when it cannot fit on the current line, a horizontal scrollbar won't be created (unless it's on an element that has word-wrapping disabled). For the vertical bar,it will allow the content to expand up to the height you have specified. If it exceeds that height, it will show a vertical scrollbar to view the rest of the content, but will not show a scrollbar if it does not exceed the height.

这篇关于使用CSS垂直滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！