开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

滚动后显示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的效果常用于网页底部的浮动工具栏、回到顶部按钮等场景。

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

腾讯云前端开发相关产品：云开发
腾讯云后端开发相关产品：云函数
腾讯云软件测试相关产品：云测试
腾讯云数据库相关产品：云数据库 MySQL
腾讯云服务器运维相关产品：云服务器 CVM
腾讯云云原生相关产品：容器服务 TKE
腾讯云网络通信相关产品：私有网络 VPC
腾讯云网络安全相关产品：Web 应用防火墙 WAF
腾讯云音视频相关产品：云直播
腾讯云多媒体处理相关产品：云点播
腾讯云人工智能相关产品：智能图像处理
腾讯云物联网相关产品：物联网开发平台
腾讯云移动开发相关产品：移动推送
腾讯云存储相关产品：对象存储 COS
腾讯云区块链相关产品：区块链服务 BaaS
腾讯云元宇宙相关产品：腾讯云元宇宙解决方案

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

ElementUI使用Backtop组件

最近在写本站的关于（About）页面，用到了Element Plus 的组件，其中在使用Backtop组件时遇到了不显示的问题，官方给的使用说明也不够清晰，故记录一下使用要点。

04

站在Animate肩膀上的项目

2.解压文件，找到dist下的wow.min.js文件用于链接到页面中使用WOW.js

04

jQuery循环翻页

在使用jQuery时，经常会遇到需要实现循环翻页的需求，例如在一个包含多个页面的网站中，通过点击按钮或滚动到页面底部触发翻页功能。

03

react native简单入门

只执行一次： constructor、componentWillMount、componentDidMount 执行多次：render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate 有条件的执行：componentWillUnmount（页面离开，组件销毁时）不执行的：根组件（ReactDOM.render在DOM上的组件）的componentWillReceiveProps（因为压根没有父组件给传递props）

01

m001mac初级篇之常用快捷键

Mac中主要有四个修饰键，分别是Command，Control，Option和Shift。

08

亲手打造属于你的 React Hooks

自定义 React Hook 是一个必要的工具，它可以让你为 React 应用程序添加特殊的、独特的功能。

06

【CSS/JS】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势

08

前端知识点总结（html+css）（上）

众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。

01

CSS笔记(15)

overflow属性指定了如果内容溢出一个元素的框(超出其高度及宽度)时,会发生什么.

01

实现滚动时Header自动隐藏

这是掘金网页版的头部，当滚动条向下滑动时，主header会隐藏，次级header会吸在页面顶部。

03

对html与body的一些研究与理解

最近一直构思着写篇关于<html>标签的文章，虽说之前处理过<html>标签，也解决过不少棘手的问题，但是对其理解还不是很透彻，很多原理都是自己推测的。

03

JavaScript 基本知识

内嵌式：把代码书写在一个script标签对内(这种不需要任何行为会自动执行JS代码)

01

jQuery遮罩（Mask）及弹窗时禁止页面滚动实现

保险起见可以把 html 和 body 的高度都设置 100% ，如下，用添加 class 的方法实现：

01

何为 content-visibility？

最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。

01

Jupyter notebook 的使用

Jupyter notebook 是一种 Web 应用，它能让用户将说明文本、数学方程、代码和可视化内容全部组合到一个易于共享的文档中，非常方便研究和教学。在原始的 Python shell 与 IPython 中，可视化在单独的窗口中进行，而文字资料以及各种函数和类脚本包含在独立的文档中。

02

javascript中元素的scrollLeft和scrollTop属性说明

注意：这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。

02

小程序textarea与弹窗

在小程序 textarea 组件上展示一个模态弹窗组件，会发现 textarea 中输入的文字内容，会直接穿透模态弹窗显示在最上面，而且还能点击输入文字。

01

移动端滚动研究

在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll发现触发的时机区分android和ios两种情况，具体可以看下面表格:

02

css元素溢出 overflow

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

02

05-老马jQuery教程-动画

根据文章内容总结摘要。

00

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

web前端 —— 移动端知识的一些总结个人在移动端的一些总结归纳，有新的知识点会一直更新一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面做了缩小优化，所以字体等都相应

04

【CSS】CSS 总结 ⑥ ( 盒子模型摆放机制 - 普通流 / 浮动 / 定位 | 浮动 - 脱离标准流 | 清除浮动语法 | 额外标签法 | after 伪元素清除浮动 ) ★

浮动特性 ( 脱离标准流布局 ) : 浮动的元素会脱离标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示 ;

01

前端课程——显示与隐藏

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/display

03

前端优化：首屏加载速度的实践

用户对网页体验要求越来越高的时候，再加上网页设计的丰富和多媒体内容的增加，图片成为了网页中不可或缺的元素。实际开发中可以看到过多的图片会导致网页加载速度变慢，影响用户体验，为了解决这个问题，前端开发者可以采用懒加载。

04

CSS第五天-定位

CSS第五天-定位静态定位：static 定位的默认值，写边偏移也不会有效果 ---- 相对定位：relative 父元素搭配子绝父相使用根据自身原来的位置，进行定位没有脱标，在页面还占有位置天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位子绝父相脱离标准流，在页面不占有位置绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度 ---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动可以

04

Day7:html和css

Day7:html和css 如果有浮动,会导致脱标,定位也能脱标,我们没有清除浮动,因为里面有子绝父相. 清除浮动的方法额外标签法,在最后一个浮动元素后面添加一个空的标签代码:

使用after伪元素进行清除浮动. .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *

03

纯滚动怎么理解_scrollview不滚动

前面两篇博文分别介绍过偏移大小、客户区大小。本文介绍元素尺寸中内容最多的一部分——滚动scroll

02

jQuery中常用的函数和属性详细解析

$("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值，参数是map

01

优雅地实现滚动容器遮罩

在设计前端页面时，常常会遇到这种情况：可滚动容器的边界并非父容器的边界，导致子元素溢出造成裁切，让页面产生比较怪异的视觉效果（左图）

01

jQuery Mobile页面跳转切换的几种方式

jQuery Mobile在移动开发中越来越受到欢迎。而他的各个版本也在持续不断的更新中。同样的我也很喜欢它，它加快了我们开发HTML5的速度。同时又具备jQuery一样的操作方法。学起来也是相当的容易。所以这一片文章就是介绍jQuery Mobile的页面跳转的。少说废话，看源码:

02

分享12个实用的 CSS 进阶小技巧

除了最后一个元素之外的所有元素都需要一些样式，这可以使用 not 选择器轻松实现。例如，要实现列表，最后一个元素不需要加下划线，如下所示：

03

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。在其他情况下，UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器的内容。每个浏览器都有一组默认的滚动条样式。在某些情况下，您可能有充分的理由来定制滚动条。例如，您可以定制滚动条样式以匹配网站的外观和感觉。

00

CSS深入理解学习笔记之overflow

1、Overflow基本属性　　overflow:visible(默认)/hidden/scroll/auto/inherit; 　　visible：超出部分可见。　　hidden：超出部分隐藏。　　scroll：超出可滚动。　　auto：若超出才出现滚动条。　　inherit：继承。（IE8+）　　注：overflow-x与overflow-y值不同，其中一个属性值被赋予visible，而另一个被赋值为hidden/scroll/auto，则visible会被重置为auto。兼容性：

05

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

在浏览器中实现用户界面时，请尽可能减少浏览器带来的差异，以使用户界面具有可预测性。跟踪所有这些差异很困难，因此，我整理了一些常见问题及其解决方案方便大家查看。

01

你会用到的 15个前端小知识

元素宽高设置为 0，通过 border 属性来设置，让其它三个方向的 border 颜色为透明或者和背景色保持一致，剩余一条 border 的颜色设置为需要的颜色。

01

前端零基础教学开始第六天 06 – day 多种定位方法和精灵图使用元素的显示与隐藏…[通俗易懂]

2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性来设置元素的位置

02

最全Mac系统快捷键一览

Mac中主要有四个修饰键，分别是Command，Control，Option和Shift。这四个键分别有自己的图案，他们经常出现在Mac应用程序中的菜单栏里，方便你随时学习新的快捷键。

06

30+ 个工作中常用到的前端小知识（干货）

一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。

03

CSS | 视差滚动 | 笔记

image-20230720145639107css3中的坐标系，rotateX就是绕着x轴旋转，rotateY就是绕着Y轴旋转，rotateZ就是绕着z轴旋转（也就是xy平面的旋转）。 perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。 translateX,translateY表现出在屏幕中的上下左右移动，transformZ 的直观表现形式就是大小变化，实质是 XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了 perspective 为 200px; 那么 transformZ 的值越接近 200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。（200-transformZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时transformZ的值为0）。

02

jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

程序员都很赖，你懂的！最近在做html5页面的开发，主要做智能终端设备的开发。对于内容比较少的页面，领导提出了要将页眉和页脚定位到网页的最上方和最下方。对于这样的要求，其实一点也不过分。但对于新手来说，确实很难，很不容易，今天我就将我学习的内容一起分享一下！放置页眉和页脚的方式有三种： Inline - 默认。页眉和页脚与页面内容位于行内。 Fixed - 页面和页脚会留在页面顶部和底部。 Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部请使用 data-position 属性来定位页眉和页脚：看代码：

05

一种离谱到极致的页面侧边栏效果探究

原文链接：https://blog.csdn.net/qq_43624878/article/details/109993036

02

【Vue前端】字幕滚动设置

在Web开发中，字幕滚动效果是一种常见的动效，常用于展示新闻头条、广告语等。Vue 3 是目前非常流行的前端框架，通过Vue 3，我们可以轻松实现字幕来回滚动的效果。本文将介绍如何使用Vue 3来实现这一效果。

01

html笔记

本文最后更新于2022年01月11日，已超过152天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

01

JS总结

1.JavaScript的基本语法 1-1:为什么要学习JavaScript 例如：a.表单验证 b.页面动态效果等等 1-2:什么是JavaScript a.脚本的基本结构语法： <script language="JavaScript"> <script language="JavaScript"> <!- <!- JavaScript 语句; JavaScript 语句; --!> --!> </script> </script

04

【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏

client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

01

原生JS实现拖拽进度条、滚动鼠标显示相应的内容

今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容，实现效果如下：

02

css属性及定位操作

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

05

vue上拉加载更多组件

我想，工作一段时间的都碰见过上拉加载更多需求，现在这种插件也蛮多的，也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题，就是下拉到最底部，刷新浏览器，浏览器会记住这个距离，从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响，于是自己就研究研究，写了一个上拉加载更多的组件。

01

动手练一练，手写一个价格对比、固定表头滚动的表格

大家好，今天我们将一起实践下如何手写固定表头，那么什么是固定表头呢？就类似 Excel 表格有个锁定表头的功能，方便用户查阅数据进行数据项的对比。虽然有不少相关插件提供了类似的功能，比如 ScrollMagic.js，但是今天的实例，我们将用纯原生的方式进行实现，当滚动条滚动至表格位置，固定表头位置，表格内容查看完后，取消固定表头的功能。

03

JQuery最全常用方法指南

ready(fn); $(document).ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以有很多个函数被加载执行，按照fn的顺序来执行。 bind(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。可能的事件属性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error one(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭