Question

我有一个包含一些动态信息的div，它有一个看起来像箭头的伪元素，

HTML：

<div id="outer">
  <div id="inner">
    something
  </div>
</div>

#inner div将具有一些动态信息列表。 #outer div的CSS：

#outer{
  width:100vw;
  height:100vh;
  background-color:grey;
}

#inner div的CSS：

    width: 30%;
  margin-left:15px;
  border-radius: 4px;
  float:left;
  height: calc(100vh - 40px);
  background-color: #ffffff;
  margin-left:50px;
  position:relative;

伪元素的CSS：

content: " ";
position: absolute;
left: -25px;
top: 50px ;
border-top: 25px solid transparent;
border-right: 25px solid #FFFFFF;
border-left: none;
border-bottom: 25px solid transparent;

在向overflow-y:auto div添加overflow-y:scroll或#inner时，psuedo元素被隐藏。

jsfiddle：http://jsfiddle.net/o3g0p1dx/3/

我该如何克服？我需要同时显示伪元素和div上的滚动条。

Answer 1

我不是HTML / CSS专家，但是仅添加一个包装并将箭头添加到#wrapper和滚动条添加到#inner元素呢？

<div id="outer">
  <div id="wrapper">
  <div id="inner">
    something
  </div>
  </div>
</div>

#outer{
  width:100vw;
  height:100vh;
  background-color:grey;
}

#wrapper{
    width: 30%;
  margin-left:15px;
  border-radius: 4px;
  float:left;
  height: calc(100vh - 40px);
  background-color: #ffffff;
  margin-left:50px;
  position:relative;
  overflow-y:visible
}

#inner{
  height:calc(100% - 20px);
  width:calc(100% - 20px);
  overflow-y:scroll;
  padding:10px;
}

#wrapper::after{
  content: " ";
position: absolute;
left: -25px;
top: 50px ;
border-top: 25px solid transparent;
border-right: 25px solid #FFFFFF;
border-left: none;
border-bottom: 25px solid transparent;
}

jsfiddle：http://jsfiddle.net/o3g0p1dx/21/

Answer 2

尝试运行此代码段，看看是否达到您的目的。

#outer{
  width:100vw;
  height:100vh;
  background-color:grey;
}

#inner{
  width: 30%;
  margin-left:15px;
  border-radius: 4px;
  float:left;
  background-color: #ffffff;
  margin-left:50px;
  position:absolute;
  top:0px;
  left:0px;
  height:calc(100vh - 40px);
}

.test {
 height:calc(100vh - 40px);
 overflow:auto;
 position:relative;
}

#test::after{
 content: " ";
 position: absolute;
 left: 25px;
 top: 50px ;
 border-top: 25px solid transparent;
 border-right: 25px solid #FFFFFF;
 border-left: none;
 border-bottom: 25px solid transparent;
}

<div id="outer">
 <div id="test" class="test">
  <div id="inner">
   something
  </div>
 </div>
</div>

Answer 3

我相信以下方法可以解决您的问题。我在#inner-content中添加了overflow-y: scroll元素，以使内容可滚动。

#outer {
  width: 100vw;
  height: 100vh;
  background-color: grey;
}

#inner {
  width: 30%;
  margin-left: 15px;
  border-radius: 4px;
  float: left;
  height: calc(100vh - 40px);
  background-color: #ffffff;
  margin-left: 50px;
  position: relative;
}

#inner::after {
  content: " ";
  position: absolute;
  left: -25px;
  top: 50px;
  border-top: 25px solid transparent;
  border-right: 25px solid #FFFFFF;
  border-left: none;
  border-bottom: 25px solid transparent;
}

#inner-content {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

<div id="outer">
  <div id="inner">
    <div id="inner-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

CSS：overflow-y：auto或溢出-y：scroll隐藏伪元素

3 个答案: