div怎么添加滚动条 如何让元素内容溢出时才显示滚动条

div怎么添加滚动条 内容溢出时如何控制滚动条的显示

说到给div添加滚动条，大家其实不用慌，真的超简单！主要就是靠CSS里的overflow属性搞定。比如说，你想给div加个纵向滚动条，可以用：

.yourdivclass {
  overflow-y: scroll;
}

这样滚动条就会一直出现，嘿，这就是那个“永远不消失”的滚动条哈。但有时候，我们不想滚动条老是在那儿，占地方，这时可以把它改成：

.yourdivclass {
  overflow-y: auto;
}

这样只有内容溢出来了，滚动条才会跳出来，整体看起来更干净更舒服。同时，水平滚动条也差不多，设置overflow-x: auto就搞定啦！记得，给div限制一个宽度或者高度，比如设置height: 200px;或者width: 300px;，才能让滚动条自动出现噢，不然div没限制大小，哪来的滚动呢？

如何使div的高度固定以及滚动条自动显示 另外如何控制滚动条滚动到指定位置

接下来，咱们聊聊怎么固定div高度，让它在内容超多时自动滚动起来。操作特别简单：

1. 给div设个固定高度，比如height: 150px;
2. 然后用overflow-y: auto;控制滚动条只在内容超出高度时出现。

示例代码长这样：

<div style="height: 150px; overflow-y: auto;">
  很多很多内容，超出了高度后，滚动条自动出现啦！
</div>

是不是很方便？ 你会发现，页面看起来更整洁，用户体验棒棒哒！

说到滚动条，这里还有个小妙招，经常有人问，怎么让滚动条自动滚到指定位置？比如滚到最顶部或者某个元素位置。这个就用JavaScript小技巧了：

• 可以用scrollTop属性，设置div的滚动条位置，比如：

yourDiv.scrollTop = 0; // 滚动到顶部

• 如果想让滚动条滚动得更顺滑一些，可以搭配jQuery的animate()，或者CSS3的过渡动画来实现，效果棒极了！例如：

$(yourDiv).animate({scrollTop: targetPosition}, 500);

这样，滚动条会在500毫秒内平滑滑动到目标位置，用户体验立马up up！

相关问题解答

1. div滚动条为什么有时总是显示？

哎，这其实跟你用的overflow属性有关系。如果你设置成scroll，那嘿，滚动条会老老实实一直显示，不管内容有没有超出边界；而用auto的话，除非内容真的多到溢出，滚动条才会出现！所以说，想让界面更清爽，就选auto，啧啧，做个明智的选择吧！

2. overflow-y和overflow-x有什么区别？

这两个嘛，分别控制纵向和横向的滚动条。overflow-y专门管上下的滚动条，是不是很贴心！overflow-x则是左右滚动条的boss，俩兄弟搭配使用，给你全面的滚动控制，想怎么滚就怎么滚，超级灵活！

3. 怎样让滚动条滚动到页面的某个元素位置？

这个简单，JavaScript里你可以拿到那个元素的位置，然后用scrollTop属性设置div滚动条的位置，如果想更炫酷点，就用animate()这种动效函数让它滑动过去。这样用户看起来既舒服又炫酷，网页立刻专业度飙升！

4. 使用滚动条会不会影响网站性能？

放心啦，滚动条本身超轻量，不会让网站变卡。不过，如果你滚动时触发大量复杂动画或者频繁操作DOM，那就可能卡一丢丢。平常写网站，搞好滚动条和内容的合理布局，小心翼翼点，完全不会出问题，放心大胆用吧！