html - 使用CSS使div可垂直滚动(Making a div vertically scrollable using CSS)

Question

This

(这个)

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

gives a div that the user can scroll in both in horizontally and vertically.

(给出一个div ，用户可以在水平和垂直方向上滚动。)

How do I change it so that the div is only scrollable vertically?

(如何更改它以使div 只能垂直滚动？)

  ask by Saswat translate from so

Answer 1

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 .

(可以使用任何属性overflow ， overflow-x或overflow-y触发滚动条，每个属性都可以设置为visible ， hidden ， scroll ， auto或inherit 。)

You are currently looking at these two:

(您目前正在研究这两个：)

• auto - This value will look at the width and height of the box.

  (auto - 此值将查看框的宽度和高度。)

  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 - This values forces a scrollbar, no matter what, even if the content does not exceed the boundary set.

  (scroll - 即使内容未超出边界集，此值也会强制滚动条，无论如何。)

  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:

(如果您始终希望显示垂直滚动条：)

You should use overflow-y: scroll .

(你应该使用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.

(如果您无法实际滚动上下文，它将显示为“已禁用”滚动条。)

If you only want a scrollbar to appear if you can scroll the box:

(如果您只想滚动框，则只需要显示滚动条：)

Just use overflow: auto .

(只需使用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.

(如果超过该高度，它将显示垂直滚动条以查看其余内容，但如果不超过高度则不会显示滚动条。)