Question

我正在为我的网站创建某种聊天框，而我无法让垂直滚动条显示在边框之外。这就是我得到的：

My chatbox

我想要的只是滚动条出现在右边的边框之外。它现在不是很漂亮，是吗。

thix框的主要HTML代码（带有一条消息，用于确保聊天框的内容）如下所示：

<div id="sb_body">
        <div id="sb_messages_set">
            <div class="sb_message">
                <div class="sb_message_header">
                    <div class="sb_message_author">PookyFan</div>
                    <div class="sb_message_hour">12:11</div>
                </div>
                <div class="sb_message_content">test</div>
            </div>
        </div>
<!-- Some other chatbox's elements -->
</div>

我的CSS代码如下所示：

div#sb_messages_set
{
border: 2px solid black;
border-radius: 10px;
background-color: #0080E0;
overflow: auto;
height: 300px;
}
div.sb_message
{
margin: 2px 4px 5px 4px;
border-bottom-style: dashed;
border-width: 1px;
border-color: black;
}
div.sb_message_header
{
clear: both;
display: block;
margin-bottom: 3px;
}
div.sb_message_author
{
display: inline;
text-align: left;
font-weight: bold;
}
div.sb_message_hour
{
display: inline;
float: right;
}
div.sb_message_content
{
clear: both;
text-align: left;
padding-bottom: 5px;
}

有没有办法实现我想要的？我一直在寻找答案，但没有找到能解决问题的方法。

哦，如果我的代码有任何问题，但它与我的问题无关，请分享您的想法，我开始玩最近创建网站，这样才有可能我在这里犯了一些新手的错误，并没有真正意识到这一点。

编辑：重要的是我忘了提及 - 我希望边框始终完全可见，我的意思是 - 我只想滚动消息，但不要让边框成为边框滚动它。换句话说，我不想要这样的事情：

Do not want

在此图片中，聊天框已滚动一点，顶部和底部框架不可见。但我希望尽管div的内容正在滚动，整个框架仍然可见。

Answer 1

好吧，如果它不起作用，并且你与设计结合了，我认为你必须使用bg图像。我找不到用CSS设置滚动条样式的方法。我用这个解决方案演示了另一个jsfiddle：http://jsfiddle.net/jlmyers42/mrx46geg/

但基本上，你只需移动一些CSS：

#sb_body {
  width: 272px;
  height: 300px;
  overflow: auto;
  padding: 0;
  margin: 0;
  background: url("http://arcsuviam.com/play/random/bluebg.png") no-repeat left top;
}
div#sb_messages_set {
  margin: 5px;
}
div.sb_message {
  padding: 2px 4px 5px 4px;
  border-bottom-style: dashed;
  border-width: 1px;
  border-color: black;
}

Answer 2

我将整个东西放在一个容器中，该容器具有溢出：自动样式应用。

看到这个小提琴：http://jsfiddle.net/jlmyers42/8tptqt19/

<div id="sb_body">
  <div id="sb_container">
    <div id="sb_messages_set">
        <div class="sb_message">
            <div class="sb_message_header">
                <div class="sb_message_author">PookyFan</div>
                <div class="sb_message_hour">12:11</div>
            </div>
            <div class="sb_message_content">test</div>
        </div>
    </div>
  </div>
<!-- Some other chatbox's elements -->
</div>

CSS
div#sb_container {
  overflow: auto;  
}

Answer 3

简单。

用你的div

如下所示放置静态宽度：

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scroll;
}

偶然发现它并为我工作。如果有所作为，我的div定位于绝对位置。

当悬停在

上时，滚动条会显示在div外部

Answer 4

因此您可以检查出site-它准确地描述了您的解决方案。我为您创建了一个小型jsfiddle。请注意，“ li”内的text-div的宽度为“ vw”。这样就可以滚动到内容之外。希望这会有所帮助！

HTML

<ul><li id="lio" class="open"><div class="text">
     Lorem..
</div></li></ul>
<button>
     Halo
</button>

CSS

.open {
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100px;
  background-color: red;
}

.text {
  padding: 15px;
  background-color: orange;
  width: 30vw;
}

ul {
  display: table;
}

JQUERY

$(document).ready(function() {

http://jsfiddle.net/fcLzqp5o/#run
    $("button").click(function() {
    $("#lio").css("overflow-y", "scroll");

});
});

CSS：如何让滚动条出现在div的边界之外？

4 个答案: