Scrollbar On Demand
约 590 字大约 2 分钟
2023-08-08
Scrollbar On Demand
按需使用滚动条。当下，我们可以控制是否显示滚动条，或者仅在内容较长的时候显示滚动条。 但强烈建议在不确定内容的情况下使用 auto 作为 overflow 属性值。
overflow-y: scroll
關關雎鳩，在河之洲。
窈窕淑女，君子好逑。
參差荇菜，左右流之。
窈窕淑女，寤寐求之。
關關雎鳩，在河之洲。
窈窕淑女，君子好逑。
參差荇菜，左右流之。
窈窕淑女，寤寐求之。
求之不得，寤寐思服。
悠哉悠哉，輾轉反側。
參差荇菜，左右采之。
窈窕淑女，琴瑟友之。
參差荇菜，左右芼之。
窈窕淑女，鍾鼓樂之。
可以看到，即使内容很短，也能看到 滚动条，这对 UI 而言很不利。 在不需要 滚动条的时候看到滚动条是一件令人不快的事情。
使用 overflow-y: auto 时，滚动条只有在内容较长时才可见。 这是更好的 视觉交互体验。
overflow-y: auto
關關雎鳩，在河之洲。
窈窕淑女，君子好逑。
參差荇菜，左右流之。
窈窕淑女，寤寐求之。
關關雎鳩，在河之洲。
窈窕淑女，君子好逑。
參差荇菜，左右流之。
窈窕淑女，寤寐求之。
求之不得，寤寐思服。
悠哉悠哉，輾轉反側。
參差荇菜，左右采之。
窈窕淑女，琴瑟友之。
參差荇菜，左右芼之。
窈窕淑女，鍾鼓樂之。