如何使滚动条出现？

Question

这是我想要制作的内容。我想要一个固定尺寸的盒子，里面会有各种JavaScript函数随着时间放置文本。当文本行数超过盒子高度时，我希望在盒子旁边出现滚动条，这样您就可以在保持盒子高度不变的情况下滚动其中的文本。

如何实现这一点？

- temporary_user_name

Answer 1

使用CSS可以实现以下效果：

div{
   overflow-y: scroll
}

您可以像@tw16一样使用overflow-y: auto。

- The System Restart

---

我已经寻找很久的东西。谢谢！ - 11684

在我回答完之后添加 overflow-y: auto 是有点不厚道的。 - tw16

不，任何方法都不可接受。我用了我略微熟悉的所有标签，因此愿意使用它们。这很有效。 - temporary_user_name

Answer 2

正如你所说，滚动条只应在有过多文本时才出现，我建议使用以下代码来实现：

div{
    overflow-y: auto
}

Live example: http://jsfiddle.net/RMpFu/

- tw16

Answer 3

在CSS中使用overflow:

document.querySelector("div").style.overflowY = "scroll";  //For Y
document.querySelector("div").style.overflowX = "scroll";  //For X

document.querySelector("div").style.overflow = "scroll";   //For both ;)

附言

如果您希望滚动条仅在必要时显示，可以使用以下方法：

document.querySelector("div").style.overflow = "auto";    //JavaScript

//-or-

div{
    overflow: auto;                       /*CSS*/
}

- Derek 朕會功夫

---

为什么你把所有东西都应用到了 body 而不是 OP 提到的 div？ - tw16

@tw16 - еңЁJavaScriptдёӯеј•з”ЁbodyжҜ”еј•з”Ёdivе®№жҳ“еҫ—еӨҡ...иҝҷеҸӘжҳҜдёҖдёӘдҫӢеӯҗгҖӮ - Derek 朕會功夫

Answer 4

<script type="text/javascript">
$(function() { 
   $('.holeEvent').hover(function() {
      $(this).removeClass('holeEvent').addClass('holeEvent2');
   },
   function(){
      $(this).removeClass('holeEvent2').addClass('holeEvent');
   });
});
</script>

- Vinoth Kumar

Answer 5

<style type="text/css">
.holeEvent {
   height: 50px;
   overflow-y: hidden;
}
.holeEvent2 {
   height: 50px;
   overflow-y: scroll;
}
</style>

<div class="holeEvent2"></div>

- Vinoth Kumar