首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当滚动到底部JAVASCRIPT时存储我当前所在的页面

当滚动到底部时,可以使用JavaScript来存储当前所在的页面。以下是一个示例代码:

代码语言:txt
复制
// 监听滚动事件
window.addEventListener('scroll', function() {
  // 判断是否滚动到底部
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    // 存储当前所在的页面
    localStorage.setItem('currentPage', window.location.href);
  }
});

这段代码通过监听滚动事件,当滚动到页面底部时,判断视窗的高度加上滚动的距离是否大于等于整个页面的高度,如果是,则表示滚动到了底部。接着,使用localStorage的setItem方法将当前页面的URL存储在名为"currentPage"的键中。

这种方法可以在用户滚动到底部时自动存储当前所在的页面,方便后续使用。在实际应用中,可以根据具体需求对存储的内容进行扩展,例如存储页面的标题、时间等信息。

推荐的腾讯云相关产品:无

请注意,本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

python自动化17-JS处理滚动

常见场景: 页面元素超过一屏后,想操作屏幕下方元素,是不能直接定位,会报元素不可见。 这时候需要借助滚动条来拖动屏幕,使被操作元素显示在当前屏幕上。...一、JavaScript简介 1.JavaScript是世界上最流行脚本语言,因为你在电脑、手机、平板上浏览所有的网页, 以及无数基于HTML5手机App,交互逻辑都是由JavaScript驱动...值,来定位右侧滚动位置,0是最上面,10000是最底部。...版权所有,微信公众号:yoyoketang 三、横向滚动条 1.有时候浏览器页面需要左右滚动(一般屏幕最大化后,左右滚动情况已经很少见了)。...,但是有时候无法确定需要操作元素 在什么位置,有可能每次打开页面不一样,元素所在位置也不一样,怎么办呢?

6K20

JAVA—— AJAX

大家好,又见面了,是你们朋友全栈君。...callback:请求成功后回调函数,可以在函数中编写我们逻辑代码。 type:预期返回数据类型,取值可以是 xml, html, js, json, text等。...公式:(滚动条距底部距离(自定义高度) + 滚动条上下滚动距离 + 当前窗口高度) >= 当前文档高度 当前文档高度:存储10条数据,100px。 滚动条距底部距离:1px。...当前窗口高度:80px。 滚动条上下滚动距离:>=19px。 前置知识 4.3、案例实现 实现思路 页面 定义发送请求标记。 定义当前页码和每页显示条数。...定义滚动条距底部距离。 设置页面加载事件。 为当前窗口绑定滚动滚动事件。 获取必要信息(当前窗口高度,滚动条上下滚动距离,当前文档高度)。 计算当前展示数据是否浏览完毕。

2.9K30

《最新出炉》系列入门篇-Python+Playwright自动化测试-50-滚动条操作

1.简介有些页面的内容不是打开页面直接加载,需要我们滚动页面,直到页面的位置显示在屏幕上,才会去请求服务器,加载相关内容,这就是我们常说懒加载。...在Chrome中可通过F12调试查看页面元素。而不是元素根本就没有,滚动才延迟加载。是可以直接操作,而且playwright 在点击元素时候,会自动滚动到元素出现位置,这点是非常人性化。...在页面中如果有两个滚动条,要操作目标滚动条,首先要使用当前光标移动至滚动所在框中(div 、iframe等),才可以进行操作。...如下图所示:4.JavaScript脚本操作滚动条4.1原理可以使用JS语句,定位滚动位置最下面,从而实现页面的向下滚动。这种方法一般来说就是终极大招,如果这个都不行,可能就没有办法了。...(宏哥滚动位置设置值比较大,所以滚动底部)。

12520

2020年前端面试题及答案_结构化面试题库及答案

大家好,又见面了,是你们朋友全栈君。 1、javascript基本数据类型?...函数体内this对象,就是定义所在对象,而不是使用时所在对象; 不可以当作构造函数,也就是说不能使用new关键在,否者会抛出一个错误; 不可以使用arguments对象,该对象在函数体内不存在...40、javascript中caller和callee使用? caller返回一个对函数引用,该函数调用了当前函数。...48、说说从输入URL看到页面发生全过程?...事件,然后取消按钮会执行外部传进来onCancel事件; 组件visble为true时候,设置bodyoverflow为hidden,隐藏body滚动条,反之显示滚动条; 组件高度可能大于页面的高度

2.5K20

详细设计一个文章页目录插件

首先需要根据文章内容二级和三级标题生成目录; 然后,页面从上到下滚动过程中,需要在右侧目录里高亮当前标题,而高亮原则是当前标题所在位置浏览器可视区域顶部距离需要小于或等于一个固定值,如上图所示...随着页面滚动,目录将从头滚到尾,那么滚动范围是从第一个子目录贴着滚动区域顶部到最后一个子目录贴着滚动区域底部为止; 页面在最顶部时候,当前高亮子目录肯定是第一个,随着页面的向下滚动,高亮位置也在不断下移...,高亮位置移动到在目录滚动区域上半部分之前,这段不进行目录滚动,如上面的图 ② 图 ③ 变化过程; 第一个子目录贴着滚动区域顶部,且高亮位置在中位往下继续滚动时候,需要进行目录滚动滚动距离是当前高亮目录所在位置距离滚动区域中间位置高度差...,即中位线以下,此时目录滚动距离将是滚动后高亮子目录底部位置中位线高度差,如上图 ②; 滚动高亮目录处于中位线以下且最后一个子目录需要贴着滚动区域底部,此时目录滚动距离将是滚动列表底部滚动区域底部高度差...2 件事情,第一是滚动页面对应目录位置,然后是高亮当前点击目录; 滚动页面对应目录位置: // 给目录子项绑定事件 let catalogDd = document.querySelectorAll

2.4K20

JS事件篇

,表明垂直滚动滚动到底了 阅读知情同意书小案例 onmousemove事件和事件对象 获取鼠标的坐标 页面滚动归属者 解决浏览器兼容性常使用以下写法 div跟随鼠标移动 事件冒泡和事件对象event...} 满足scrollHeight - scrollTop == clientHeight,表明垂直滚动滚动到底了 ---...-- 默认禁用,除非将滚动条滑动到最底部 --> 同意上面的协议 //首先绑定一个滚动滚动事件...; var ly=event.clientY-obj.offsetTop; //触发鼠标按下事件之后,obj会跟随鼠标移动 //即触发鼠标在当前页面的移动事件...中会存储不同浏览器信息,每个浏览器基本都有自己唯一标记,可以通过正则表达式判断 通过 属性名 in 对象 可以判断对应属性在当前对象中是否存在 ---- 浏览器对象模型—History

12.6K10

如何采集javascript动态加载网页

从一个运行 javascript 网站加载所有数据来加载内容,目前问题是运行启动代码它无法加载 javascript 内容,因为用户应该向下滚动才能加载。...为了加载运行JavaScript来加载内容网站上所有数据,可以修改Splash代码以模拟滚动并确保整个页面呈现,从而能够检索所需HTML内容。...然后,我们定义滚动参数,包括每次滚动之间延迟、滚动步数和页面的初始滚动高度。...接下来,我们使用jsfunc创建一个JavaScript函数(scroll_to_bottom()),通过将垂直滚动位置设置为文档高度,将页面滚动底部。...我们在循环中使用此函数多次模拟滚动,每次滚动后等待页面滚动并加载新内容。 在最后一次滚动后,我们等待额外内容加载,然后返回完全呈现页面的HTML内容。

90530

一个快速 Vue3 无限滚动组件

20c7052ccda4 如果你在社交媒体上停留时间过长,那么,你所在网站很可能正在使用无限滚动组件。...无限滚动组件是在用户向下滚动页面加载新内容,而不是将其分成多个页面。 它们对于特定类型内容(例如用户生成内容)非常有效。 以下是无限滚动示例。...你可以阅读之前分享一篇文章《无限滚动与分页哪个用户体验更好?如何正确使用它们》,在这里,只简单总结一下它们有缺点。...那么,现在让我们继续进行激动人心部分:无限滚动! 4. Vue3 无限滚动 现在我们已经完成了所有设置,当用户向下滚动到内容底部,我们可以开始加载更多数据。...当我们向下滚动当前内容底部,应该会自动加载新内容。让我们看看我们有什么。 无限滚动组件可能扩展 这只是创建Vue3无限滚动组件介绍。有很多不同方向可以改进它。

2.1K20

基于JS实现回到页面顶部五种写法(从实现增强)

该实现主要在页面顶部放置一个指定名称锚点链接,然后在页面下方放置一个返回到该锚点链接,用户点击该链接即可返回到该锚点所在顶部位置   [注意]关于锚点详细信息移步至此 <body style="...元素未<em>滚动</em><em>时</em>,scrollTop<em>的</em>值为0,如果元素被垂直<em>滚动</em>了,scrollTop<em>的</em>值大于0,且表示元素上方不可见内容<em>的</em>像素宽度   由于scrollTop是可写<em>的</em>,可以利用scrollTop来实现回到顶部<em>的</em>功能...window中显示<em>的</em>文档,x和y指定<em>滚动</em><em>的</em>相对量   只要把<em>当前</em><em>页面</em>的<em>滚动</em>长度作为参数,逆向<em>滚动</em>,则可以实现回到顶部<em>的</em>效果 <button...如果为true,表示元素<em>的</em>顶部与<em>当前</em>区域<em>的</em>可见部分<em>的</em>顶部对齐(前提是<em>当前</em>区域可<em>滚动</em>);如果为false,表示元素<em>的</em><em>底部</em>与<em>当前</em>区域<em>的</em>可见部分<em>的</em>尾部对齐(前提是<em>当前</em>区域可<em>滚动</em>)。...如果没有提供该参数,默认为true   使用该方法<em>的</em>原理与使用锚点<em>的</em>原理类似,在<em>页面</em>最上方设置目标元素,<em>当</em><em>页面</em><em>滚动</em><em>时</em>,目标元素被<em>滚动</em>到<em>页面</em>区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果

4.9K21

仿腾讯课堂固定滚动列表ReactNative组件

前言 由于业务需要做成类似腾讯课堂课程详情滚动效果,考虑后面有可能有新呈现方式,RN提供组件没有这种滚动控件,不如自己封装,其实去年已经写了一篇但是写比较乱,周末花了点时间重写梳理下做东西。...- 80}},那这样滚动距离120滚动条到底部了,视频播发控件区域距离屏幕顶部还有80。...跑起来运行后发现一个严重问题是,如果Tab导航控件内容区域存在ScrollView或者ListView,无法滚动,只有最外层可以滚动,也就是手势滚动被拦截了?...属性发现其在屏幕上LocationOnScreenX坐标不同,如果当前滚动容器显示则等于0。...接口JavaScript上要做事 4.实现对应JavaScript模块 开始动手 1.创建原生固定滚动控件 根据前面的分析,我们知道写原生滚动控件主要是重写控制拦截事件方法onInterceptTouchEvent

4.8K70

导航栏滚动吸顶并自动高亮和点击跳转锚点

2021-01-16 07:37:33 在阿里云云市场页面上有一个效果,就是api导航栏滚动滚动到其所在位置,自动吸顶,滚动到下方所在导航栏指定介绍,自动高亮其导航栏。...实现方法 正常情况下我们点击自动定位所在位置一般用id锚点方式,但是这种方式有一个缺陷就是无法实现滚动条缓动效果,而且带url上还会通过hash方式显示出ID,另外也无法实现滚动到内容所在位置自动高亮导航栏...那么需要我们自己手动来实现以下,具体实现思路就是增加滚动条监听事件,滚动到导航栏指定内容区域,给其导航栏增加高亮样式,点击导航栏,计算好滚动滚动距离,让其滚动过去即可。...这样我们就实现了通过滚动条来控制导航栏高亮效果了,接下了我们要实现便是点击导航栏自动定位所在内容。...,此变量是为了防止底部高度不够, 无法定位最下方,结果导致程序无限循环bug, 通过下面的代码应该可以明白此变量意义*/ let prevScrollTop = null; let

10.3K40

debounce与throttle区别

在2011年,Twitter网站曾爆出一个问题:在主页往下滚动页面会变得缓慢以致没有响应。.../** * 节流函数(JavaScript高级程序设计) * @param method 方法 * @param scope 当前函数执行作用域 */ function throttle(method...正真的业务场景: 一个相当常见例子,用户在你无限滚动页面上向下滚动鼠标加载页面,你需要判断现在距离页面底部多少。如果用户快接近底部,我们应该发送请求来加载更多内容页面。...在此debounce没有用,因为它只会在用户停止滚动触发,但我们需要用户快到达底部去请求。通过throttle我们可以不间断监测距离底部多远。...pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() - $(window).height(); // 滚动条距离页面底部小于

60541

全栈开发工程师微信小程序-上(中)

list是tab集合. pagePath是页面路径. iconPath是默认常态图标. selectedIconPath是选中图标....import与include include引用是将目标文件代码复制include标签所在位置. concat会将两个或多个数组合并为一个数组...: 关闭当前页面 switchTab: 跳转到tabBar页面 reLaunch: 关闭所有页面 navigateBack: 关闭当前页面 只有switchTab,reLaunch可以跳转到tabBar...scroll-x 允许横向滚动 scroll-y 允许纵向滚动 upper-threshold 距顶部/左边多远 lower-threshold 距底部/右边多远 scroll-top 设置竖向滚动条位置...当前所在滑块 index interval 自动切换时间间隔 duration 滑动动画时长 circular 是否采用衔接滑动 vertical 滑动方向是否为纵向 movable-view 可移动视图容器

84140

蒙层禁止页面滚动方案

但是在蒙层出现时候滚动页面,如果不加处理,蒙层底部页面会开始滚动,实际上我们是不希望他进行滚动,因此需要阻止这种行为。...弹出蒙层禁止蒙层下页面滚动,也可以称为滚动穿透问题,文中介绍了一些常用解决方案。...如果在蒙层内部进行滚动蒙层内滚动滚动底部时候再继续滚动的话,蒙层下页面也是能够滚动,这样交互就比较混乱,文中内容测试环境是Chrome 96.0.4664.110。 <!...,反之就不做控制,之后又出现了问题,需要判断滚动到顶部和滚动底部时候禁止滚动,否则触碰到上下两端,弹窗可滚动区域滚动条到了顶部或者底部,依旧穿透body,使得body跟随弹窗滚动,这样的话逻辑复杂程度就比较高了...,要阻止页面滚动,可以将其固定在视图中即position: fixed,这样它就无法滚动了,蒙层关闭再释放,当然还有一些细节要考虑,将页面固定视图后内容会回头最顶端,这里我们需要记录一下用来同步top

6.1K21

Selenium4+Python3系列(九) - 上传文件及滚动条操作

在写脚本,总会遇到一种情况,就是滚动拉倒最下面了,表单或者下拉框、按钮这些元素未在当前页面展示,而webdriver提供方法都是操作当前页面可见元素,这时我们使用JavaScript操作浏览器滚动条...1、核心思路 就是使用js去控制浏览器滚动位置,在使用selenium调用JavaScript操作js完成。...下面举例几种常用滚动js代码示例如下: //拖动滚动条至底部 document.documentElement.scrollTop=10000 window.scrollTo(0,document.body.scrollHeight...window.scrollTo(左边距,上边距)方法 window.scrollTo(200,1000) 2、实际案例 以博客园文章列表页为例,来演示滚动条操作,具体代码如下: from time...driver.find_element(By.CSS_SELECTOR,".forFlow [role='article']:nth-of-type(1) .vertical-middle") sleep(2) # 将页面滚动条拖到底部

1.4K10

终于等到你,新虚拟键盘API 即将到来,快来先睹为快吧!

在技术术语中,可见部分被称为视口,而隐藏部分以及当前可见部分则是布局视口。 主要问题是虚拟键盘激活,可视视口大小会缩小。...,使用JavaScript来实现这样行为。...无法滚动页面的最底部 视口底部有一个带有 position: fixed 项目,我们通常会添加 padding-bottom 来偏移页面,使用户可以滚动到最底部。...让我们举个简单例子。我们有一个联系页面,其中包含长内容和表单输入。如果我们选择让虚拟键盘覆盖页面内容,那么将无法滚动到表单最后。 在这种情况下,不建议键盘覆盖内容。明智地使用它。...max() 功能第一部分是当前活动部分。 键盘激活,我们将导航移动到键盘下方。这里 100px 是一个随机数,重点是添加一个比导航高度更大元素。

27820

基于Apify+node+reactvue搭建一个有点意思爬虫平台

前言 熟悉朋友可能会知道,一向是不写热点。为什么不写呢?是因为不关注热点吗?其实也不是。有些事件还是很关注,也确实有不少想法和观点。但我一直奉行一个原则,就是:要做有生命力内容。...它提供了管理和自动扩展无头Chrome / Puppeteer实例池工具,支持维护目标URL请求队列,并可将爬取结果存储本地文件系统或云端。...当我们使用nodejs作为后台服务器, 由于nodejs本身是单线程,所以爬取请求传入nodejs, nodejs不得不等待这个"耗时任务"完成才能进行其他请求处理, 这样将会导致页面其他请求需要等待该任务执行结束才能继续进行..., 所以我们需要设计一个节流装置,来控制每次并发数量, 当前一次完成之后再进行下一批页面抓取处理....核心思路就是利用puppeteerapi手动让浏览器滚动底部, 每次滚动一屏, 直到页面滚动高度不变则认为滚动底部.具体实现如下: // 滚动高度 let scrollStep = 1080;

2.2K20

Material Design — 底部导航(Bottom Navigation)

超过6个就不要放在底部导航里了,太挤了 底部导航和标签 组合底部导航和tabs要注意,因为这样组合可能会因为用户不知道二者优先级而在导航引起混乱。...应按下列要求制作每一个动作(目前并不适用,因为图标无法100%传递标签内容): ·页面处于焦点,显示页面的icon和标签; ·只有三个动作,始终显示icon和文本标签; ·如果有四个或五个动作...---- 行为(这部分动图去MD网站看吧...) 底部导航栏可以从一个主题中n级页面移动到另一个主题一级页面。当用户去往下级页面要保持底部导航可用,可通过持续展示,或者通过滚动隐藏和显示。...底部导航icon 点击底部导航icon将直接带你相关页面,或刷新当前页面。每个icon必须指向目的地,并且不能打开菜单或对话框。...滚动 底部导航栏滚动可以动态地出现和消失: ·向下滚动隐藏底部导航栏 ·向上滚动显示 手势 在内容区域上使用左右滑动手势不会在一级页面之间切换。

4K90

Scroll,你玩明白了嘛?

而且相较于其他方法,一般不会出什么幺蛾子(后文会讲到)。 3.2 应用 自己以往需要用到滚动场景有: 组件初始化,定位目标位置 点击当前页靠底部某个元素,触发滚动翻页 .........3.3 scrollIntoView 奇怪现象 3.3.1 页面整体偏移 最近在过一些历史用例时候,遇到了这种情况: 现象大概就是,当我通过按钮,滚动定位聊天区域某条消息页面整体发生了偏移...1、页面有 iframe 情况下,比如说这个例子。 表现是 iframe 内内容发生滚动,主页面也发生了滚动。...关键在于 block: "start",从上面的参数说明我们了解,默认不传参数情况下,取是 block: start,它表示 “元素顶端与所在滚动可视区域顶端对齐”。...核心交互是: 1、当用户没有人为滚动文稿,会保持自动翻页功能 2、当用户人为滚动文稿,后续将不会自动翻页,并出现 “回到当前播放位置” 按钮 3、假如点击了 “回到当前播放位置” 按钮,会回到目标位置

3K21

前端系列第8集-Javascript系列

访问变量或函数JavaScript 引擎会先从当前作用域开始查找,如果没有找到,则会沿着作用域链向上查找直到全局作用域。...函数内部访问变量或函数JavaScript 引擎会首先在当前函数词法环境中查找,如果没有找到,则会继续向上查找父级函数词法环境,直到找到为止。...在JavaScript中,this是一个非常重要概念,它通常用于引用当前正在执行代码所在对象。 换句话说,this是一个指向当前执行代码所在对象指针。...判断是否需要触发上拉加载   if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 100) { // 页面向上滚动接近底部...基本数据类型与引用数据类型区别在于,基本数据类型值直接存储在变量所在内存空间中,而引用数据类型值则存储在堆内存中,并以引用地址形式保存在变量所在内存空间中。

18610
领券