Question

考虑the following situation，其中绝对定位的伪元素触发滚动，即使元素内的内容没有超出页面底部（您可能需要完整地查看代码段）页面模式，看看我的意思）：

div {
  width: 300px;
  padding: 2rem;
  background-color: orange;
  margin: 0 auto;
  position: relative;
  line-height: 1.3em;
  font-family: sans-serif;
}

div:after {
  content: "";
  height: 200vh;
  position: absolute;
  left: 0;
  right: 0;
  top: -50vh;
  border: 10px solid blue;
}

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus doloremque sunt perferendis reprehenderit! Libero quaerat ipsum ad corrupti eveniet ipsa unde obcaecati officiis tenetur nobis sed in nesciunt voluptatum quidem velit reprehenderit, dolorem eum. Vero dignissimos sint sapiente architecto repudiandae nostrum quo sed! Quasi quaerat, atque nisi quae quod minima! Neque asperiores possimus deserunt impedit harum cumque quibusdam? Non dolorum voluptate vitae, perferendis et obcaecati quos fugiat inventore excepturi tempore rerum dicta. Expedita, necessitatibus iure suscipit earum, vel ipsa, repudiandae quod fugit optio consequuntur beatae dicta alias at quia perspiciatis odit totam esse soluta voluptas deserunt! Sunt vero reiciendis placeat?</div>

鉴于这种情况，有没有办法阻止伪元素触发滚动，即使在保留溢出内容触发滚动的能力？

我在this situation中遇到了这个问题，我正在使用Flexbox创建a sticky footer，并使用伪元素在该页脚后面创建对角背景颜色。

我搜索了SO和Google的解决方案，但未找到解决方案。

Answer 1

您需要将overflow: hidden添加到伪元素的父级。在您的演示中，它是.bottom。

Answer 2

我最终切换到a JS + SVG solution，允许我创建我需要的效果，同时避免在页脚下方溢出：

＆＃13;

var footerContent = $( '.content' );

var updateTriangle = function() {
  var w = footerContent.outerWidth();
  var h = footerContent.outerHeight();
  var r = 27 / 100;
  var b = w * r;
  var B = b + h;
  var A = ( w * B ) / b;
  
  $( '.triangle' ).width( A ).height( B );
}

$( window ).on( 'resize', updateTriangle );

updateTriangle();

＆＃13;

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  padding: 0; 
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.container {
  position: relative;
  width: 50vw;
}

.triangle {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 27'><defs><linearGradient id='footerBgGradient' x1='0' x2='0' y1='0' y2='1'><stop offset='0%' stop-color='%23006BA5'/><stop offset='100%' stop-color='%2300487F'/></linearGradient></defs><polygon points='0,27 100,27 100,0' fill='url(%23footerBgGradient)' /></svg>")  no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -10;
}

.content {
  z-index: 10;
  padding: 1rem;
  font-family: sans-serif;
  color: white;
  border: .5rem solid rgba(255,255,255,.5);
}

＆＃13;

<div class="container">
  <div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero vero animi suscipit debitis unde mollitia veritatis sapiente maxime velit obcaecati repudiandae incidunt, corrupti, voluptates ad. Recusandae itaque doloribus quibusdam fugit ut quis cumque sit, fugiat, culpa perspiciatis mollitia inventore hic tempore aspernatur aliquam quo. Consequatur saepe a cumque! Dicta dignissimos facilis laborum impedit ad sunt quam tenetur? Repellat, officiis sed veritatis possimus ipsum, labore quam eligendi est minus quae incidunt saepe. Consequatur laudantium atque qui soluta, voluptate dolores dolore blanditiis.</div>
  <div class="triangle"></div>
</div>

＆＃13;

防止伪元素触发滚动

2 个答案: