logo标签列表

CSS：如何使滚动条出现在div边框外？

htmlcssscrollbar
11

我正在为我的网站创建一种聊天框，但我无法使垂直滚动条出现在边框外面。 这是我得到的：

My chatbox

我想要的只是让滚动条在右侧边框外面显示。现在它并不真正漂亮，是吗。

这个对话框的主要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的内容被滚动时仍然可见。

4个回答
3

如果这样不起作用，而您又坚持该设计，我认为您必须使用背景图片。我找不到一种用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;
}
2
我会将整个内容放在一个应用了overflow:auto样式的容器中。
请参考这个示例：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;  
}
1

简单。

使用您的div

像下面这样放置静态宽度：

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

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

我偶然发现了它并且对我有用。如果我的div是绝对定位的，那可能会有所不同。
当鼠标悬停在上面时，滚动条出现在div之外。
1

所以你可以查看网站 - 它精确地描述了解决方案。我为你创建了一个小的jsfiddle。请注意，"li"内部的文本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");

});
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接