防止伪元素触发滚动答案

【问题标题】：Prevent Pseudo Element from Triggering Scroll防止伪元素触发滚动
【发布时间】：2017-12-18 20:04:37
【问题描述】：

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

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;
}

&lt;div&gt;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?&lt;/div&gt;

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

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

我在 SO 和 Google 上都搜索过解决方案，但没有找到。

【问题讨论】：

标签： css scroll pseudo-element

【解决方案1】：

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

【讨论】：

它确实解决了滚动问题，但也防止了对角线背景在页脚上方可见，这是我所需要的。

【解决方案2】：

我最终切换到a JS + SVG solution，这让我可以创建所需的效果，同时避免页脚下方溢出：

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();

* {
  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);
}

<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>

【讨论】：