滚动后显示div，并在页面末尾隐藏div

是一种常见的前端开发技术，用于在网页滚动时控制某个div元素的显示和隐藏。

实现这个效果可以通过监听页面的滚动事件，当滚动到一定位置时，显示目标div，否则隐藏目标div。

以下是一个实现滚动后显示div，并在页面末尾隐藏div的示例代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    #targetDiv {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background-color: #f1f1f1;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="targetDiv">这是要显示的div</div>
  <div style="height: 2000px;"></div>
  <script src="script.js"></script>
</body>
</html>

JavaScript代码（script.js）：

window.addEventListener('scroll', function() {
  var targetDiv = document.getElementById('targetDiv');
  var scrollHeight = document.documentElement.scrollHeight;
  var clientHeight = document.documentElement.clientHeight;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTop + clientHeight >= scrollHeight - 100) {
    targetDiv.style.display = 'none';
  } else {
    targetDiv.style.display = 'block';
  }
});

上述代码中，通过监听scroll事件，获取页面的滚动高度scrollTop、可视区域高度clientHeight和页面总高度scrollHeight。当滚动到页面末尾时（滚动高度加上可视区域高度大于等于页面总高度减去一个阈值），隐藏目标div；否则显示目标div。

这种滚动后显示div的效果常用于网页底部的浮动工具栏、回到顶部按钮等场景。

腾讯云相关产品和产品介绍链接地址：