22.溢出滚动渐变 & 无效输入时抖动

溢出滚动渐变

为溢出的元素添加一个淡出的渐变,以更好地指示还有更多内容可以滚动。

• 使用 ::after 伪元素创建一个从 transparent 到 white 的 linear-gradient()(从上到下)。
• 使用 position: absolute、width 和 height 在其父元素中放置和调整伪元素的大小。
• 使用 pointer-events: none 将伪元素从鼠标事件中排除,允许其后面的文本仍然可以被选择/交互。

<div class="overflow-scroll-gradient">
 <div class="overflow-scroll-gradient-scroller">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
   Iure id exercitationem nulla qui repellat laborum vitae, <br />
   molestias tempora velit natus. Quas, assumenda nisi. <br />
   Quisquam enim qui iure, consequatur velit sit? <br />
   Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
   Iure id exercitationem nulla qui repellat laborum vitae, <br />
   molestias tempora velit natus. Quas, assumenda