滚动函数触发多次而不是一次

2023-11-25

我正在尝试创建一个网站,只需一次滚动操作即可自动滚动到每个部分。这意味着代码必须检查页面是向上滚动还是向下滚动。我相信下面的代码解决了我的问题,但是在页面滚动时滚动操作被多次触发。您将看到 if 语句中的第一个警报达到 5,而不是所需的 1。对于此事的任何帮助将不胜感激。

[注意] 我正在使用velocity.js 库滚动到容器内的每个部分。

var page = $("#content-container");
var home = $("#home-layer-bottom");
var musicians = $("#musicians");
var athletes = $("#athletes");
var politics = $("#politics");
var bio = $("#politics");
var pages = [ home,musicians,athletes,politics,bio ];

var pageCur = 0;


var lastScrollTop = 0;
page.scroll(function(){

var st = $(this).scrollTop();
var pageNex = pageCur + 1;

if (st > lastScrollTop){
    alert(pageNex);
pages[pageNex].velocity("scroll", { container: $("#content-container") });
} else {
   alert(pageCur-1);
pages[pageCur-1].velocity("scroll", { container: $("#content-container") });
}
lastScrollTop = st;
pageCur = pageNex;
});

当用户执行此操作时,滚动事件(以及调整大小事件)会多次触发。为了帮助做到这一点,最佳实践是debounce。然而,我从来没有让它发挥作用。相反,我使用全局布尔值来检查函数是否已触发。

var scrolled = false;
page.on('scroll', function(){
    if(!scrolled){
        scrolled = true;
        //do stuff that should take a while...
        scrolled = false;
    };
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

滚动函数触发多次而不是一次 的相关文章

  • 我怎样才能让这个脚本在 WordPress 上运行?

    我有这个脚本 document ready function text1 click function this hide 代码html div class div1 p class text1 text to appear when th
  • 检测 Google 验证码的挑战窗口何时关闭

    我正在使用谷歌隐形验证码 有没有办法检测挑战窗口何时关闭 我所说的挑战窗口是指您必须选择一些图像进行验证的窗口 目前 我在按钮上放置了一个旋转器 一旦单击按钮 就会呈现验证码挑战 无法向用户提示另一个质询窗口 我以编程方式调用渲染函数 gr
  • 将 Excel 范围转换为 VBA 字符串

    我想将给定范围内的值转换为 VBA 字符串 其中原始单元格值由任何选定的列分隔符和行分隔符分隔 分隔符可以是一个字符或更长的字符串 行分隔符是行末尾的字符串 该字符串应该像我们从左上角 从左到右 到右下角读取文本一样完成 以下是范围 A1
  • 如何禁用 body 元素的滚动?

    如何禁用正文滚动 body css overflow hidden 仅隐藏滚动条 但不会禁用滚动 我想禁用正文的滚动 但我想保持其他分区的滚动完好无损 试试这个 CSS 不需要 jQuery 评论后更新 尝试指定高度body too
  • C# 和 Javascript SHA256 哈希的代码示例

    我有一个在服务器端运行的 C 算法 它对 Base64 编码的字符串进行哈希处理 byte salt Convert FromBase64String serverSalt Step 1 SHA256Managed sha256 new S
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • 在 JQuery 中发布表单并填充 DIV - 在 IE 中损坏

    我正在尝试创建一个通过 jQuery 发布数据并将返回值填充到同一 DIV 中的表单 这样页面就不会在发布操作时刷新 div div
  • 如何在 Web 服务器上设置 gzip 压缩?

    我有一个嵌入式网络服务器 总共有 2 兆空间 通常 您使用 gzip 文件对客户端有利 但这会节省我们在服务器上的空间 我读到你可以只 gzip js 文件并将其保存在服务器上 我在 IIS 上测试过 但没有任何运气 为了使这项工作成功 我
  • 使用 JQuery 禁用和启用所有超链接

    我有以下禁用所有超链接的内容 但在事件发生后我想再次启用它们 我该如何执行此操作 a click function return false 我认为这不仅仅是将其设置为 true 那么简单 谢谢大家 不要以这种方式绑定 点击 处理程序 而是
  • 如果一个对象结构与另一个对象结构不匹配/不匹配,如何引发异常

    我将读取格式正确的用户输入对象 也就是说 输入对象现在可以具有接口中未定义的任何键或子结构 如果用户提供了无效的对象 我如何抛出异常 预定义接口 export interface InputStructureInterface tableN
  • ES6继承:使用`super`访问父类的属性

    JavaScript 的super关键字 当我在 Chrome Babel TypeScript 上运行代码时 得到了不同的结果 我的问题是哪个结果是正确的 规范的哪一部分定义了这种行为 下面的代码 class Point getX con
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • 如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件?

    如何将 Vue js 作用域样式应用于通过以下方式加载的组件
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • 如何重复 ajax 请求,直到满足 RxJS Observable 的条件?

    我正在尝试重复请求 直到响应包含使用 RxJS 的数据 此时我想调用成功 或失败 处理程序 但我在使用 RxJS 时遇到了麻烦 这是我目前的方法 redux observable action observable mergeMap gt
  • Service Worker 与 Shared Worker

    Service Worker 和 Shared Worker 有什么区别 我什么时候应该使用 Service Worker 而不是 Shared Worker 反之亦然 Service Worker 具有共享 Worker 之外的附加功能
  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工
  • 确定 Javascript 中的日期相等性

    我需要找出用户在 Javascript 中选择的两个日期是否相同 日期以字符串 xx xx xxxx 形式传递给该函数 这就是我需要的全部粒度 这是我的代码 var valid true var d1 new Date datein val
  • Chrome 扩展:强制 popup.html 关闭

    我想知道是否可以强制 popup html 关闭 在弹出的 javascript 中 window close
  • 如何在 Jquery/Javascript 中绑定模糊和更改,但只触发一次函数?

    我试图在选择元素更改时触发函数 由于 Ipad 在 on change 方面遇到问题 我还想绑定到 blur 这在 Ipad 上工作得很好 但是我不希望两个事件都触发该函数两次 所以我需要某种挂钩来确保两个事件是否都触发change and

随机推荐

  • Google 文档查看器不适用于 Amazon s3 签名的网址

    借助 google doc 查看器 api 我尝试在 iframe 内显示存储在 S3 存储桶上的 doc 文件 我已经做了一些研究并发现this 我尝试在这里应用 var encodedUrl encodeURIComponent htt
  • 当成员是 unique_ptr 时删除了复制构造函数[重复]

    这个问题在这里已经有答案了 这段代码工作正常 class Test int ptr new int 10 int main Test o Test t o 但是当我们使用 unique ptr 而不是 raw ptr 时 我们会得到一个错误
  • Minikube 从未启动 - 重新启动集群时出错

    我正在使用 Arch Linux我安装了 virtualbox 5 2 12我安装了 minikube 0 27 0 1我安装了 Kubernetes v1 10 0 当我尝试启动 minikube 时sudo minikube start
  • 如何将未转义的 XML 写入 XMLStreamWriter?

    我有许多小的 XML 块 它们应该作为子元素嵌入到一个大的 XML 中 有什么办法可以将这些块写入XMLStreamWriter不逃避他们 以下是处理此问题的几个选项 选项 1 使用javax xml transform Transform
  • 使用 vector::iterator 或 at() 迭代 STL 向量哪个更快?

    就性能而言 什么会运行得更快 有区别吗 它依赖于平台吗 1 Using vector
  • 更改 ckEditor 的背景颜色

    我需要使用 ckEditor 在加载时动态更改背景颜色 它所在的页面是一个动态加载页面 用户在其中具有特定的背景颜色 我无法加载 css 它必须只是编辑器主体背景颜色 所以我尝试了 window onload function CKEDIT
  • 获取 Angular 2 路由器中当前路由组件的引用?

    有没有一种干净的方法来获取当前路由组件的引用 这似乎有效 但看起来很老套 this router currentInstruction component componentType prototype somePropertyOrFunc
  • Android 应用程序包上传在 Firebase 身份验证中创建奇怪的帐户(<字符>.<5 位数字>@gmail.com)

    我有一个使用 Flutter 的 Android 应用程序 应用程序后端是 Firebase 每次我将应用程序包上传到 Play 商店控制台时 有人 某些系统 会在我的 Firebase 项目中创建奇怪的用户帐户 他们很奇怪 因为电子邮件格
  • SIGINT 取消 bash 脚本中的读取?

    我正在编写一个 bash 包装器来学习一些脚本概念 这个想法是在 bash 中编写一个脚本 并在登录时将其设置为用户的 shell 我做了一个 while 循环reads and evals 用户的输入 然后注意到 每当用户键入CTRL C
  • mysql_upgrade - 致命错误:升级失败

    我最近将 MySQL 服务器从 5 1 升级到 5 5 并且我尝试使用 mysql upgrade 升级我的数据库 但我不断收到此错误 root ip mysql upgrade uadmin p Enter password Lookin
  • 应用程序处于后台状态时的 CLLocationManager

    我的问题是 当我的应用程序处于非活动状态时 CLLocationManager 是否继续运行 Yes if CLLocationManager首先被称为startUpdatingLocation方法 并且在AppName Info plis
  • SVG 到 PNG 文本无法正确显示 - Arial 字体

    我遇到一个问题 当存在具有不同字体系列的文本 如 Arial 时 使用 Apache Batik 转换的 PNG 会有所不同 该问题发生在 Cent OS 6 运行 Tomcat 7 和 Java 6 的环境中 用于将 SVG 转换为 PN
  • 杀死名称以特定字符串开头的缓冲区

    这是我的问题 我使用 Emacs 并获得大量一直毫无用处的缓冲区 例如 Messages 或 Completions 我想绑定 C y 来关闭所有以 开头的缓冲区 除了 shell 和 shell 缓冲区 为此 我想在 emacs 文件中添
  • 输入元素上的 JavaScript 更改事件仅在失去焦点时触发

    我有一个输入元素 我想继续检查内容的长度 每当长度等于特定大小时 我想启用提交按钮 但我面临着 Javascript 的 onchange 事件作为事件的问题仅当输入元素超出范围时触发 而不是在内容更改时触发
  • PhpStorm:SCSS 文件观察器设置

    我需要帮助在 PhpStorm 中设置我的 SCSS 文件观察器 我使用的是 Ubuntu 我有 PhpStorm 6 我有带有 Ruby 1 9 3p194 和 Sass 3 2 5 的 RVM 我已在设置 gt gt 文件观察器中设置文
  • 中断处理程序中的 C printf()?

    I heard printf C 中的内容不应在 ISR 中使用 是因为它是阻塞调用 还是因为它不可重入 If printf 不是可重入的 那么这是否意味着它也不能用于多线程程序 除非它以某种方式 同步 我认为可能是所有这些 甚至更多 典型
  • 如何在 Blazor 中模拟 setTimeout()?

    我正在尝试在 Blazor 中复制一个简单的 JS 方法 这个想法是type out给定单词 句子 等中的每个字符 W3学校有一个很好的例子 说明了如何快速完成此操作 那么 给出他们的示例 如何在 C 和 JS 中做同样的事情呢 var i
  • 使用剪贴板管理器在 Android 中复制粘贴图像

    我想使用剪贴板管理器将图像从我的 Android 应用程序复制到其他 Android 应用程序 我做了很多研究并阅读了this教程 但不包括图像复制部分 下面的代码复制图像 但当我尝试粘贴时 仅粘贴图像的路径 ContentValues v
  • 如何让lldb忽略EXC_BAD_ACCESS异常?

    我正在 Mac OSX 上根据 sigaction sa handler 机制编写一个程序 运行用户的代码片段并准备随时捕获信号 异常 该程序工作正常 但问题是我无法使用 lldb 对其进行调试 即使我设置了 lldb 似乎也无法忽略任何异
  • 滚动函数触发多次而不是一次

    我正在尝试创建一个网站 只需一次滚动操作即可自动滚动到每个部分 这意味着代码必须检查页面是向上滚动还是向下滚动 我相信下面的代码解决了我的问题 但是在页面滚动时滚动操作被多次触发 您将看到 if 语句中的第一个警报达到 5 而不是所需的 1