镂空广告，一行CSS实现滚动时藏在信息流后面的广告效果

、首先看一看是什么效果？

2、一行background-attachment:fixed搞定镂空信息流广告

这个方法理论上是最简单效果也最好的方法。

CSS中有个background-attachment属性，当我们设置属性值为fixed的时候，背景图片相对于窗体定位，不受滚动影响。

于是，我们的实现就很简单：信息流列表HTML中插入个广告<a>链接，然后广告图作为背景图呈现，设置background-attachment:fixed效果就可以实现了，就这么简单。

HTML和CSS代码示意：

<div class="list">信息流列表1</div>
<div class="list">信息流列表2</div>
<a href="#" class="ad" target="_blank">广告</a>
<div class="list">信息流列表3</div>
<div class="list">信息流列表4</div>
.ad {
 display: block;
 height: 600px;
 background: url(./ad.jpg) no-repeat top fixed;
 background-size: 100%;
}

唯一的不足：iOS Safari不支持background-attachment:fixed

iOS Safari很早时候position:fixed也不支持，后来妥协了，支持了；但是background-attachment:fixed还是老样子，不支持，怕是嫌弃background-attachment:fixed烧性能，对于一个连IE6，IE7浏览器都支持良好的CSS声明，Safari不支持（包括iOS微信），我也无力说些什么。

因此，我们还需要额外做些功夫，兼容下iPhone手机浏览器。

我的做法是如果是iPhone手机，广告图片postion:fixed定位，配合JS实时clip剪裁。核心JS如下：

// ele就是广告元素DOM对象
window.addEventListener('scroll', function () {
 var bound = ele.parentElement.getBoundingClientRect();
 var clip = 'rect('+ [bound.top + 'px', ele.parentElement.clientWidth + 'px', bound.bottom + 'px', 0].join() +')';
 ele.style.clip = clip;
});

查了下浏览器兼容性资料，发现Android4.4+版本开始，放弃了对background-attachment:fixed的支持，但是Android Chrome浏览器却支持，这有些令人不解（见下图）。

我用家里人的Android手机测试，背景效果表现为scroll，看来JS补丁要多个Android设备。

3、position:fixed也可以实现藏在后面的信息流广告

position:fixed也可以实现藏在后面的信息流广告，实现原理就是藏在其他信息流元素的背后，以及头部或者底部元素（如果有）的底部，关键就是z-index层级控制了。虽然原理简单，但是实际操作还是有些啰嗦的，通常信息流页面的HTML结构都比较复杂，此时再z-index属性各种设置，很容易造成z-index混乱。

效果大致如下GIF截屏：

HTML和CSS代码原理示意：

<div class="list">信息流列表1</div>
<div class="list">信息流列表2</div>
<a href="#" class="ad" target="_blank">
 <img src="./ad.jpg">
</a>
<div class="list">信息流列表3</div>
<div class="list">信息流列表4</div>

.list {
 background-color: #fff;
 position: relative;
 z-index: 1;
}
.ad {
 display: block;
 height: 576px;
}
.ad img {
 position: fixed; top: 0;
 width: 400px;
}

优点和不足

基于position:fixed实现的优点在于：

1. 我们的广告内容可以支持复杂HTML，而不仅仅是一张图片；

2. 所有浏览器都兼容，包括iPhone Safari浏览器。

不足在于：

1. 需要其他元素进行层级配合，相互耦合增加了CSS的复杂度。

如果实际开发时候发现z-index层级控制比较麻烦，可以试试第一个demo中使用的CSS clip剪裁，直接只显示当前广告区域内容，不过需要JS配合，不是纯CSS实现了，自己权衡。

4、结束语

采用position:fixed固定定位实现的时候，我们还可以把广告元素从信息流列表中抽离，直接放在整个容器的后面，然后借助visibility属性实现点击穿透，如下示意：

<a href="#" class="ad">广告</a>
<ul>
 <li>信息流列表1</li>
 <li>信息流列表2</li>
 <li></li> <!-- 撑开高度 -->
 <li>信息流列表3</li>
 <li>信息流列表4</li>
</ul>

.ad {
 position: fixed;
}
ul {
 position: relative;
 visibility: hidden;
}
li:empty {
 /* 撑开高度，实际开发请使用类名控制，这里精简HTML才使用:empty */
 height: 576px;
}
li:not(:empty) {
 visibility: visible;
}

具体就不展开了。

英格兰凉了，比利时很强。

希望本文内容可以帮助需要的人。

然后，如果你有更好地实现方法，欢迎不吝赐教！

者 | 大澈

大家好，我是大澈！

又是好久没更文了，前阵子驾着新车回了趟老家，很“幸运”的经历了平原县地震的余波。

回想当时，半夜凌晨，房屋晃动，如同身处过山车，一切都很不真实。虽然震感时间很短暂，但是现在依旧让我记忆犹新，人类在大自然面前真的是太渺小了，很多时候真的是力不从心。

所以，真心想和大家说一句，生活不易，及时行乐，珍惜身边人，且行且珍惜。

ONE

需求分析，问题描述

一、需求

一个可以滚动的菜单，为它添加一个可以下拉滚动的提示。要求滚动到菜单最底部时，隐藏下拉滚动的提示，否则让其一直显示。

二、问题

1、如何实现滚动条效果？

2、如何判断是否滚动到底部？

TWO

解决问题，答案速览

实现代码如下，复制粘贴即可直接使用。

代码中滚动条的实现使用了element的el-scrollbar组件。组件中包裹的第一个div，指的是需要滚动的视图。组件中包裹的第二个div，指的是下拉滚动提示的图标，这里根据需求进行设置，可以更换静态的或者那种闪烁跳跃的动态提示图标。

// 1、模版
<el-scrollbar max-height="calc(100vh - 84px)" @scroll="handleScroll" ref="myScrollbar">
<div class="sideBarIn"></div>
<div class="pcSign pcIcon" v-if="isShowIcon">
<img class="iconImg" src="../assets/images/common/xiaGery.png"></div>
</el-scrollbar>


// 2、逻辑
// 滚动条事件
const handleScroll = (val) => {
// 防止Scrollbar实例为空
if (!myScrollbar.value) {
return
}

// 判断是否滚动到底部
let isScrollToEnd = Number(myScrollbar.value.wrapRef.scrollTop.toFixed(0)) 
+ Number(myScrollbar.value.wrapRef.clientHeight.toFixed(0))
=== Number(myScrollbar.value.wrapRef.scrollHeight.toFixed(0));

if (isScrollToEnd) {
// 滚动到底部的处理逻辑
isShowIcon.value = false
} else {
// 非滚动到底部的处理逻辑
isShowIcon.value = true
}
}


// 3、样式
.pcIcon {
width:100%;
height: 100px;
position: absolute;
bottom: -4px;
left: 0;
text-align: center;
line-height: 130px;
background: linear-gradient(to bottom, rgba(234, 234, 234, 0.5), rgba(234, 234, 234, 1));

.iconImg {
width: 20px;
height: 20px;
}
}
.pcSign{
display: block;
}

THREE

问题解析，知识总结

一、如何实现滚动条效果？

实现滚动条效果有两种实现方式：利用css的overflow: scroll属性、利用element的el-scrollbar组件。

1、overflow: scroll属性

在div元素上添加 overflow-y: scroll; css属性，就能显示出一个滚动条，如果不指定是x或y轴，则水平和垂直都会出现滚动条。

当然，前提是你需要指定div元素的高度或者最大高度。

2、el-scrollbar组件

一般在vue项目中，我们可直接使用element的el-scrollbar组件，因为官方为我们提供了许多API，以及各种适配优化。

el-scrollbar组件的属性如下：

el-scrollbar组件的事件如下：

el-scrollbar组件的实例属性如下：

二、如何判断是否滚动到底部？

这里判断是否滚动到底部的关键在于scrollTop+clientHeight是否等于scrollHeight的值。只有当滚动的距离+可视区域的高度，与scrollHeight相等时，才证明滚动条滚动到了底部。

同样的，如果scrollHeight与可视区域的高度直接就相等时，又说明元素不可以滚动，也就没有滚动条。这一点在有此需求时，可以进行实用。

元素的几个宽高属性释义如下：

- END -

详细介绍如何使用 HTML 和 CSS 创建文本与图片的无限滚动动画效果。网页内容包含两个部分，一个是标签组滚动，另一个是图片组滚动，其中动画的效果主要表现为标签和图片一直横向的水平滚动，并且元素会无缝衔接从而实现无限循环，并且首尾两端有渐变蒙层效果，以造成出现和消失的过渡。

HTML 结构

首先，HTML 代码部分包含了5个.scroll元素，这个数量取决于你网页有几个无限滚动区域。每个scroll元素都放了两个div(d1和d2)用于创建滚动容器，其中每个div元素都具有相同的内容元素，用于展示滚动内容。本案例的主要内容就是标签组span和图片组img。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Infinite Scrolling Animation</title>

  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="scroll" style="--t: 20s">
    <div>
      <span>HTML</span>
      <span>CSS</span>
      <span>JavaScript</span>
      <span>Vue</span>
      <span>React</span>
      <span>Figma</span>
      <span>Photoshop</span>
    </div>

    <div>
      <span>HTML</span>
      <span>CSS</span>
      <span>JavaScript</span>
      <span>Vue</span>
      <span>React</span>
      <span>Figma</span>
      <span>Photoshop</span>
    </div>
  </div>

  <div class="scroll" style="--t: 30s">
    <!-- 同上 -->
  </div>

  <div class="scroll" style="--t: 10s">
    <!-- 同上 -->
  </div>

  <div class="scroll" style="--t: 35s">
    <!-- 同上 -->
  </div>

  <div class="scroll img-box" style="--t: 25s">
    <div>
      <img src="./images/img_01.jpg" alt="image">
      <img src="./images/img_02.jpg" alt="image">
      <img src="./images/img_03.jpg" alt="image">
      <img src="./images/img_04.jpg" alt="image">
      <img src="./images/img_05.jpg" alt="image">
      <img src="./images/img_06.jpg" alt="image">
      <img src="./images/img_07.jpg" alt="image">
      <img src="./images/img_08.jpg" alt="image">
      <img src="./images/img_09.jpg" alt="image">
    </div>

    <div>
      <!-- 同上 -->
    </div>
  </div>
</body>

</html>

标签组和图片组里的两个div要宽度保持一致，也就是说d1和d2里的每个标签span要对应相同，否则两个div就会出现滚动覆盖或距离过大。还有就是每个scroll标签的自定义变量--t的值不一样(又快又慢)，要想滚动效果统一的话时间调整一样就可以了。

CSS 样式

接下来，看 CSS 部分设置了一些基本的全局样式，有重置样式、内容水平垂直居中布局、背景字体颜色等不做过多赘述。

/* @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700,800&display=swap'); */
@import './google-fonts.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  min-height: 100vh;
  background-color: #222;
  color: #fff;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}

/* ... */

滚动容器scroll有一个固定宽度，然后对于溢出的内容隐藏不可见，以及使用 mask-image 创建了一个线性渐变遮罩，给内容带来滚动时的淡出淡入视觉效果。

span元素标签的样式设置了内联块级元素的展示方式，以及一些边距、边框、字母间距和文本转换。此外，当鼠标悬停时，还设置了背景颜色的变化。
img图片的样式设置了最大宽度和灰度滤镜，当鼠标悬停在图片上时，滤镜会被移除，呈现出原始彩色图片。两者都提供了一种交互反馈的效果。


.scroll {
  display: flex;
  width: 700px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}

.scroll > div span {
  display: inline-block;
  margin: 10px;
  padding: 5px 10px;
  background-color: #333;
  border-radius: 5px;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  cursor: pointer;
  transition: background-color 0.5s;
}
.scroll > div span:hover {
  background-color: #4caf50;
}

.img-box img {
  max-width: 150px;
  filter: grayscale(1);
  
  cursor: pointer;
  transition: filter 0.5s;
}
.img-box img:hover {
  filter: grayscale(0);
}

/* ... */

技术实现

接着就是每个滚动容器内包裹两个一样的div元素，用于创建无缝衔接，下面分别简称为d1和d2。通过 white-space: nowrap 属性确保 div 内的内容不换行，从而使得内容能够水平滚动。

主要通过两个不同的关键帧动画@keyframes关键帧和过渡animation属性控制两个滚动区域实现的滚动效果。让元素以无限循环和线性动画的方式在.scroll滚动容器内移动。拿本案列的img-box元素阐释一下动画执行过程：

首先，它定义的CSS变量是--t: 25s。里面两个div元素都应用了25s匀速无限循环动画。
然后，在d1中应用了延迟25s * -1 = -25s，animate动画从 transform: translateX(100%) 开始，将元素初始位置设置在容器的右侧外部。在动画结束时，元素移动到了容器的左侧外部，即 transform: translateX(-100%)。
最后，在d2中应用了延迟25s / -2 = -12.5s，animate2动画从 transform: translateX(0) 开始，将元素初始位置设置在容器的右侧外部。在动画结束时，元素移动到了容器的左侧更远的位置，即 transform: translateX(-200%)。滚动的距离是比第一个d1滚动区域更远的，这样可以实现错开的滚动效果。


.scroll > div {
  white-space: nowrap;
  animation: animate var(--t) linear infinite;
  animation-delay: calc(var(--t) * -1);
}
@keyframes animate {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.scroll > div:nth-child(2) {
  animation: animate2 var(--t) linear infinite;
  animation-delay: calc(var(--t) / -2);
}
@keyframes animate2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200%);
  }
}



@media screen and (max-width: 768px) {
  .scroll {
    width: 90vw;
  }

  .scroll > div span {
    background-color: #4caf50;
  }

  .img-box img {
    width: 33vw;
    filter: grayscale(0);
  }
}

由于animate延迟小于animate2，所以动画a2先执行，从右向左持续滚动到x: -200%，当滚动到-100%时也就是当前可见区域，此时a1开始执行动画 1 ，从右向左持续滚动到x: -100%，当滚动到100%时也就是当前可见区域，a2已经到-200%了，接着看a1继续滚动到-100%，a2继续从0到-200%，如此循环往复。