手动触发滚动事件

最新推荐文章于 2024-09-11 11:07:15 发布

原创最新推荐文章于 2024-09-11 11:07:15 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#手动触发js滚动事件 #手动触发scroll事件 #手动让页面滚动1像素 #手动让页面滚动1px

JavaScript 同时被 2 个专栏收录

19 篇文章

订阅专栏

杂七杂八

6 篇文章

订阅专栏

该博客探讨了一个常见的前端开发问题，即监听滚动事件导致的页面效果异常。作者提出了一种解决方案，通过创建并触发一个模拟的滚动事件来解决这个问题。在页面数据加载完毕后，使用一个定时器立即执行这段代码，可以避免手动滚动1px带来的影响，确保页面正常运行。

解决因为监听滚动事件手动计算滚动距离影响其他效果事件（textare滚动事件也算在这里面从而影响了页面效果，需手动让页面滚动1px，避免影响。）

let evt = document.createEvent('UIEvents')
evt.initUIEvent('scroll', true, false, window, 1)
window.dispatchEvent(evt)

这段代码可在页面数据请求完后调用，可在上段代码加个定时器，定时器时间为0

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lt要努力

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Elasticsearch】 elasticsearch之Recovery 手动触发索引滚动

九师兄

11-02

910

Elasticsearch之手动触发索引滚动以处理大数据

Meta_C的博客

08-19

395

在本文中，我们将探讨如何手动触发索引滚动以处理大数据，并提供相应的源代码示例。在这个示例中，我们只是简单地打印每个文档的源数据，但你可以根据自己的需求进行进一步的处理。如果结果大小大于0，说明还有更多的结果需要处理，我们继续使用更新后的滚动 ID 执行下一批请求。在上述代码中，我们首先执行了初始的搜索请求，设置了每次滚动获取的文档数量为100，并指定了滚动的时间间隔为1分钟（“1m”）。首先，我们需要执行初始搜索请求，然后使用返回的scroll ID来获取下一批结果，直到所有结果都被处理完毕。

参与评论您还未登录，请先登录后发表或查看评论

JavaScript 如何手动触发窗口滚动事件

KevinMiGuan的博客

12-04

3088

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{height:2000px;} </style> </head> <bo...

滚动触发某一个事件

weixin_44540416的博客

07-17

356

先看看效果吧： HTML <div class="gx_bo_gu">  <p class="gx_pi pi" onmousedown="moveTop()"><i class="layui-icon iis" style="display: none;"></i></p> ...

js手动触发事件dispatchEvent()

热门推荐

qq_35134066的博客

01-29

2万+

如果大家将一张网页看成一个form的话，大致上就成了一个web form的模型。在win form 下要想手动触发某一个对象的事件是很简单的，只要发送一条消息即可达成。(PostMessage) 但是网页并不是基于消息机制的，如果我们想在一张网页上写出一个类似于按键精灵的功能该如何实现呢？为大家介绍js下的几个方法：(jquery使用trigger()触发事件) 1. createEvent（...

滚动触发js事件

口袋的天空的博客

04-15

756

滚动触发js事件通过document.documentElement.scrollTop || document.body.scrollTop;获取滚动的距离 <template> <div class="three"> {{flag}} <div class="box" :style="{background:flag?'red':'green'}"></div> </div> </template> &l

js 滚动条滚动到底部触发事件

weixin_43445771的博客

11-11

2942

一、前言　　在开发项目时，常常需要展示大量数据。如果全部显示出来，数据相对少时，看不出来什么不同，如果数据很多时，一次请求全部显示，这就相当可怕了。面对这种问题，PC里使用了分页效果，将数据分成一页页，换页时请求当前页数据，而屏幕较小的移动端，分页就不怎么好看了，常用的方法是滚动到底部时继续加载数据滚动加载其实也是一种分页，只是不使用页码而已。二、正文（一）、滚动事件的效果和原理效果：滚动到当前页的底部时，会转圈圈缓冲加载下一页的数据，完成后滚动区域和内容增加，以此类推；原理： 3个数据（

vue3-seamless-scroll手动触发滚动

08-28

若需手动触发滚动，你可以通过组件提供的API方法来实现。通常，这个插件会有一个`scrollTo`或`scrollBy`方法，可以接收一个参数，如： ```javascript import { useScroll } from 'vue3-seamless-scroll'; export ...

DevExpress 在layoutcontrol内置控件上无法触发滚动解决方式

12-24

在DevExpress的布局控件(LayoutControl)中，有时候用户可能会遇到一个常见的问题，即在内置的控件上无法通过鼠标滚轮触发滚动行为。这可能是由于默认的事件处理或控件设置导致的。本文将深入探讨这个问题，并提供17...

vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

10-15

而当从一个Tab切换到另一个Tab时，相关的List组件并不会因为Tab切换这一事件而自动更新其内部状态，特别是与滚动加载相关的状态（如加载状态的标识位）并未得到重置，从而导致load事件不再被触发。为了解决这个...

JavaScript对滚动条的操作

gaohuanjie的专栏

07-03

3632

JavaScript对滚动条的操作

【JavaScript】页面滚动事件详解

最新发布

lph159的博客

09-11

5199

页面滚动事件是浏览器在用户滚动页面时触发的事件。无论是通过鼠标滚轮、键盘上的箭头键，还是触控设备的滑动动作，只要页面内容发生了滚动，就会触发scroll事件。JavaScript 提供了一个简单的方式来监听这个事件，通过window或特定 DOM 元素的方法，我们可以对滚动行为做出反应。console.log('页面正在滚动');});页面滚动事件是 Web 开发中不可或缺的工具，通过它，开发者可以实现丰富的用户交互功能，如回到顶部按钮、无限滚动加载、滚动动画等。

JS中手动触发事件的方法

weixin_34167043的博客

09-01

851

如果大家将一张网页看成一个form的话，大致上就成了一个web form的模型。在win form 下要想手动触发某一个对象的事件是很简单的，只要发送一条消息即可达成。(PostMessage) 但是网页并不是基于消息机制的，如果我们想在一张网页上写出一个类似于按键精灵的功能该如何实现呢？为大家介绍js下的几个方法： 1. createEvent（eventType）参数：eventType 共...

js滚动条触碰底部触发的事件

zyf13671493506的博客

09-27

815

var minAwayBtm = 100; // 距离页面底部的最小距离 window.addEventListener("scroll",function(e){ var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height(); if (awayBtm <= minAway...

JS滚轮事件(mousewheel/DOMMouseScroll)了解

weixin_44273564的博客

12-28

707

本文复制地址：http://www.zhangxinxu.com/wordpress/?p=3175 一、学无止境、温故知新 //: 本段与技术无关，一些很个人的吐槽，可以跳过正常状态已经没有了小学生时代过目不忘的记忆力了，很多自己折腾的东西、接触的东西，短短1年之后就全然不记得了。比方说，完全记不得获取元素与页面距离的方法(getBoundingClientRect)，或者是不记得现代浏览器下...

使用 dispatchEvent() 方法

weixin_30900589的博客

10-06

1451

使用 dispatchEvent() 方法在组件 ActionScript 类文件的正文中，您可以使用 dispatchEvent() 方法来广播事件。dispatchEvent() 方法的语法如下： dispatchEvent(eventObj) eventObj 参数是一个描述事件的 ActionScript 对象在调用 dispatchEvent() 方法之前，必须在代码中对...

js模拟鼠标自动滑动滑块--dispatchEvent

nizaili1的博客

04-13

6159

initMouseEvent参数 event.initMouseEvent(type, canBubble, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget); 形参 type 设置事件类型type 的字符串，包含以下几种鼠标事件：click，mousedown，mouseup，mouseover，mousemove

浏览器事件机制详解

00后|互联网💻|办公室🍵茶农，希望通过技术改变生活|爱折腾💪|收集各类📚网络资源，好物不私藏，点点关注，不迷路。全网搜：阿宇的编程之旅 or 阿宇的宝库

09-18

1783

浏览器的事件机制是web前端面试及开发过程中绕不开的话题，可以说一切用户操作或者浏览器的行为都离不了事件，它允许开发者通过JS处理用户的操作，并处理操作逻辑，将结果反馈给用户。本篇文章将深入浏览器事件的运行机制，和大家一起探讨其强大的功能及广泛的用法浏览器的事件可以分为以下几类：鼠标事件键盘事件表单事件窗口事件DOM事件

Event事件

weixin_34297704的博客

02-22

444

客户端JavaScript程序采用了异步事件驱动编程模型。一、相关术语事件就是Web浏览器通知应用程序发生了什么事情。事件类型（event type）是一个用来说明发生什么类型事件的字符串。例如，“mousemove”表示用户移动鼠标，“keydown”表示键盘上某个键被按下等等。事件目标（event target）是发生的事件与之相关的对象。当讲事件时，我必须同时指明类型和目...