防止伪元素触发滚动

Posted 2021-05-04

考虑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的解决方案，但未能找到解决方案。

答案

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

另一答案

我最终切换到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>

以上是关于防止伪元素触发滚动的主要内容，如果未能解决你的问题，请参考以下文章

滑动页面时防止touch事件的误触问题

如何防止片段在活动重新创建时触发 onCreate onCreateView

判断滚动事件由下到上触发事件（伪）

防止 UIScrollView 中的 UISlider 触发滚动

如何防止垂直滚动并通过一个滑动手势触发水平

如何将伪元素固定在滚动元素中？