如何防止：当滚动条出现时，伪元素动态地机会位置？

时间：2017-06-26 13:21:28

标签： css css3

当滚动条出现时，:pseudo位于relative内的element元素不再位于所需的位置。

相反，它们只是流向element内的某个地方。

假设我有以下标记。如您所见，:pseudo元素很好地贴在元素的边缘。

如果没有滚动条，:pseudo位置正确的代码段 

.without-scroll-bar {
  border: 5px solid green;
  padding: 15px;
  position: relative;
}

.without-scroll-bar:before,
.without-scroll-bar:after {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
}

.without-scroll-bar:before {
  border-top: 5px solid red;
  border-right: 5px solid red;
  top: -5px;right: -5px;
}

.without-scroll-bar:after {
  border-right: 5px solid red;
  border-bottom: 5px solid red;
  bottom: -5px;right: -5px;
}
<div class="without-scroll-bar">
  <p>This is just some example text.</p>
</div>

但是，当我element有一个固定的max-height时，如果它到达它，它会显示一个滚动条。 :pseudo元素不再适合定位。它们只是在容器内的某处流动。

:pseudo未定位为disired的片段 

code {
  background: #ededed;
  padding: 3px;
}

.with-scroll-bar {
  border: 5px solid green;
  padding: 15px;
  position: relative;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.with-scroll-bar:before,
.with-scroll-bar:after {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
}

.with-scroll-bar:before {
  border-top: 5px solid red;
  border-right: 5px solid red;
  top: -5px;right: -5px;
}

.with-scroll-bar:after {
  border-right: 5px solid red;
  border-bottom: 5px solid red;
  bottom: -5px;right: -5px;
}
<div class="with-scroll-bar">
  <p>As you can see, the <code>:pseudo</code> elements are not in position anymore</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
</div>

  • 我该如何防止这种情况？
  • 如何制作我想要的布局，也适用于elements滚动条？
  • 更好的是，如何使:pseudo元素保持在边缘？就像第一个片段一样，但是它的容器上还有一个滚动条？

哦，我应该注意到我无法访问HTML本身。所以我不能只围绕它div，然后在:pseudo上添加div元素。

3 个答案:

答案 0 :(得分：1)

想法是你必须完全跳过Pseudo的使用， 您可以做的是使用Javascript附加两个元素，最后一个在结尾添加一个元素。

由于:Pseudo elements永远不会附加到DOM，因此您需要这些元素来操纵新添加的元素的位置以匹配您的需求

Example Fiddle

上面的例子中有一些边缘情况，这两个按钮只是为了改变父div的高度。 您将获得基本想法，并需要相应地修复它们。

答案 1 :(得分：1)

的JavaScript

如果你可以使用JavaScript，另一种方法是利用jQuery中的wrap()函数，稍后将伪元素添加到这个包装器div。因此，您仍然无需更改HTML结构中的任何内容，因为JavaScript会为您执行此操作。

<强> JS 

$(".with-scroll-bar").wrap("<div id='wrapper' />");


$(".with-scroll-bar").wrap("<div id='wrapper' />");
body {
  height: 1000px;
}

code {
  background: #ededed;
  padding: 3px;
}

#wrapper {
  position: relative;
}

.with-scroll-bar {
  border: 5px solid green;
  padding: 15px;
  position: relative;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

#wrapper:before,
#wrapper:after {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  z-index: 1000;
}

#wrapper:before {
  top: 0;
  right: 0;
  border-top: 5px solid red;
  border-right: 5px solid red;
}

#wrapper:after {
  bottom: 0;
  right: 0;
  border-right: 5px solid red;
  border-bottom: 5px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is just some example text.</p>
<p>This is just some example text.</p>

<div class="with-scroll-bar">
  <p>As you can see, the <code>:pseudo</code> elements are not in position anymore</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
</div>

CSS

还有另一个纯CSS的解决方案，但这个非常非常hacky。这只能在我看到的Chrome中使用，它不支持div的动态高度。这意味着当没有滚动条时，布局将会中断。

body {
  height: 1000px;
  transform: translateZ(0);
}

code {
  background: #ededed;
  padding: 3px;
}

.with-scroll-bar {
  border: 5px solid green;
  padding: 15px;
  position: relative;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.with-scroll-bar:before,
.with-scroll-bar:after {
  position: fixed;
  display: flex;
  align-self: flex-end;
  content: "";
  height: 20px;
  width: 20px;
}

.with-scroll-bar:before {
  border-top: 5px solid red;
  border-right: 5px solid red;
  margin-top: -20px;
  margin-left: 34px;
}

.with-scroll-bar:after {
  border-right: 5px solid red;
  border-bottom: 5px solid red;
  margin-top: 295px;
  margin-left: 34px;
}
<p>This is just some example text.</p>
<p>This is just some example text.</p>
<div class="with-scroll-bar">
  <p>As you can see, the <code>:pseudo</code> elements are not in position anymore</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
</div>

答案 2 :(得分：0)

通过使伪元素更加可见（例如四边的边界）可以很容易地看出它们的布局方式与达到最大高度时的布局相同：在空间的角落处元素占据，而不是其内容的顶部和底部。

可预测的布局包括position：fixed或者，如下所示，将伪元素内联放置。你在使用什么伪元素？

＆＃13;
＆＃13; 
code {
  background: #ededed;
  padding: 3px;
}
 .with-scroll-bar p{
margin:15px;
}
.with-scroll-bar {
  border: 5px solid green;
  padding: 0px;
  position: relative;
  max-height: 300px;
  overflow-y: auto; 

}

.with-scroll-bar:before,
.with-scroll-bar:after {
  border: 5px solid red;
display:block;
    content: "";
  height: 20px;
  
 


}

  .with-scroll-bar:before 
 {

left:0px;
width:20px;
  margin:0px;


}   

.with-scroll-bar:after {
 
left:0px;
right:0px;
  margin:0px;


}
＆＃13; 
<div class="with-scroll-bar">
  <p>As you can see, the <code>:pseudo</code> elements are not in position anymore</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
  <p>This is just some example text.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题