限制“鼠标滚轮”增量每次滚动触发一次

2024-04-02

我使用下面的代码,向不同方向滚动两个 div () 但我很好奇是否可以限制滚动,以便每次滚动只触发一次(而不是不断滚动并将我的函数发送到无限循环。

$('.page-left, .page-right').bind('mousewheel', function(event, delta) {
    var windowHeight = $(window).height();
    if (delta < 0) {
        prevProject();
    }
    if (delta > 0) {
        nextProject();
    }
});

你可以在这里看到我的进展:http://dev.rdck.co/lyonandlyon/ http://dev.rdck.co/lyonandlyon/

提前致谢, 右

动画函数参考:

var prevProject = function() { // up arrow/scroll up
    var windowHeight = $(window).height();

    $('.page-left .page-left-wrapper').css({bottom:'auto'});
    $('.page-left .page-left-wrapper').animate({top:0},800, function() {
        $('.page-left .page-left-wrapper').prepend($('.page-left .project-left:last-of-type'));
        $('.page-left .page-left-wrapper').css({top:-windowHeight});
    });
    $('.page-right .page-right-wrapper').css({top:'auto'});
    $('.page-right .page-right-wrapper').animate({bottom:+windowHeight*2},800, function() {
        $('.page-right .page-right-wrapper').append($('.page-right .project-right:first-of-type'));
        $('.page-right .page-right-wrapper').css({bottom:+windowHeight});
    });
};


var nextProject = function() { // down arrow/scroll down
    var windowHeight = $(window).height();

    $('.page-left .page-left-wrapper').animate({top:0},800, function() {
        $('.page-left .page-left-wrapper').prepend($('.page-left .project-left:last-of-type'));
        $('.page-left .page-left-wrapper').css({top:-windowHeight});
    });
    $('.page-right .page-right-wrapper').animate({bottom:+windowHeight*2},800, function() {
        $('.page-right .page-right-wrapper').append($('.page-right .project-right:first-of-type'));
        $('.page-right .page-right-wrapper').css({bottom:+windowHeight});
    });
};

您可以只检查鼠标滚轮功能中的动画(demo http://jsbin.com/IgAHEmi/1/)

$('.page-left, .page-right').on('mousewheel', function(event, delta) {
    if ($('.page-left-wrapper, .page-right-wrapper').is(':animated') ) {
        return false;
    }
    var windowHeight = $(window).height();
    if (delta < 0) {
        prevProject();
    }
    if (delta > 0) {
        nextProject();
    }
});

更新:我们决定使用去抖,因为需要停止长滚动(将手指向下滑动触摸板)(更新了演示 http://jsbin.com/IgAHEmi/2/edit?output).

$(document).keydown( $.debounce( 250, function(e) {
    switch (e.which) {
    case 38: // up arrow
        prevProject();
        break;
    case 40: // down arrow
        nextProject();
        break;
    }
}) );

$('.page-left, .page-right').on('mousewheel', $.debounce( 250, function(event, delta) {
    var windowHeight = $(window).height();
    if (delta < 0) {
        prevProject();
    }
    if (delta > 0) {
        nextProject();
    }
}) );
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

限制“鼠标滚轮”增量每次滚动触发一次 的相关文章

  • jQuery如何让Enter(Return)通过输入文本字段充当Tab键但最终触发提交按钮

    我已经屏蔽了 Enter 返回 键 实际上 将其转换为 Tab 键 因此 当在输入文本字段内按下时 它充当 Tab 键 这很好 但我需要它在最后一个字段中按下时触发提交按钮 下面是 Enter 键突变的代码 input keydown fu
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 将一个文本框的内容复制到另一个文本框

    假设在文本框中输入了一个条目 是否可以在第二个文本框中保留相同的输入文本 如果是这样 这是如何完成的
  • 如何记录返回的事件发射器

    如何记录所发出的事件stream返回于MyFunc 与 JSDoc MyFunc description param Object opts description return Stream description function My
  • 如何改变HTML5视频的播放速度?

    如何更改 HTML5 中的视频播放速度 我查过视频标签的属性 https www w3schools com html html5 video asp在 w3school 但无法做到这一点 根据这个网站 http www chipwreck
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 如何访问另一个 mobx 商店中的 mobx 商店?

    假设以下结构 stores RouterStore js UserStore js index js each of Store jsfiles 是一个 mobx 存储类 包含 observable and action index js只
  • 选中复选框时提交表单

    有没有办法在选中复选框时提交表单
  • 是否可以使用打字稿映射类型来创建接口的非函数属性类型?

    所以我正在研究 Typescript 的映射类型 是否可以创建一个接口来包装另一种类型 从而从原始类型中删除函数 例如 interface Person name string age number speak void type Data
  • jquery:当我在文档上附加一层时,如何重置文档滚动条?

    当我在文档上附加图层时 如何重置文档滚动条 例如 它就像 Facebook 页面 当您有一个很长的文档时 您需要向下滚动才能查看较旧的图像 帖子 当你点击照片时 滚动条发生了变化 从顶部开始 但文档页面根本不跳转 当关闭照片查看器图层时 滚
  • 如何在 e2e AngularJS 测试中进行文件上传?

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en
  • 有关于 PHP 中的 V8JS 的文档吗?

    有没有关于V8JS的文档 我是否只需要标准 PHP 或一些扩展即可使用 V8JS 我将非常感谢有关 PHP 中的 V8JS 的任何信息 要求 PHP 5 3 3 和 V8 库和标头安装在正确的路径中 Install http www php
  • ES6 模板文字的延迟执行

    我正在玩新的ES6 模板文字 http tc39wiki calculist org es6 template strings 我首先想到的是String format对于 JavaScript 所以我开始实现一个原型 String pro
  • 需要js、d3 和 nvd3 集成

    我面临整合的问题要求 questions tagged requirejs with d3 questions tagged d3 and nvd3 questions tagged nvd3 我找到了一个使用 require 的简单解决方
  • 您如何看待引导模式触发器的相应回调?

    On 引导模态 http getbootstrap com javascript modals 我们知道我们可以为触发器绑定事件 例如show or hide using show shown hide hidden 但此事件绑定仅适用于一
  • 有没有非常轻的灯箱? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Django 与谷歌图表

    我试图让谷歌图表显示在我的页面上 但我不知道如何将值从 django 视图传递到 javascript 以便我可以绘制图表 姜戈代码 array Year Sales Expenses 2004 1000 400 2005 1170 460
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1

随机推荐

  • 是否可以检查 CSS 变量是否已定义?

    我想知道是否可以仅在定义了 css 变量的情况下应用 CSS 规则 我已经看到可以定义默认值 例如 background color var bgColor red 但我认为这不会在我的项目中起作用 因为我想要的是 当未定义变量来获取该行在
  • Conda - 从防火墙后面的 .whl 文件安装tensorflow

    我有一个Anaconda3 与 Python 3 6 Spyder 环境 正在尝试安装tensorflow但是 由于公司防火墙的原因 无法使用标准的 pip 安装 此外 出于同样的原因 我无法创建 anaconda 环境 我想做的是直接从安
  • Levene 检验的多重比较事后检验

    我想在 R 中对 Levene 的测试进行成对比较事后测试 我知道如何使用 PROC GLM 在 SAS 中执行此操作 但我似乎不知道如何在 R 中执行此操作 有人有吗主意 在下面的示例中 我希望能够测试所有 猫 级别 即 A B A C
  • Scala 中的无符号变量

    我正在将一些 C 代码转换为 Scala 因为我们正在 据称 进入企业大厦的现代世界 至少我是被告知的 某些 C 代码使用无符号变量 这些变量对其执行了大量位级 移位 操作 我对如何将它们转换为 Scala 完全处于停滞状态 因为我相信 S
  • PrimeFaces。渲染后更新数据表

    我有一个数据表并想要保留过滤器 我可以保存过滤器值并通过调用数据表将它们放回 我将过滤器值放回到渲染中 现在我想要过滤表 是的 我想调用服务并从中获取所有数据 然后我想使用保留在过滤字段中的值来过滤表 我找不到在渲染表格后启动过滤的解决方案
  • 线程可以处理很长的 I/O 进程吗

    我在这里开始一个新主题 该主题将与这个问题 https stackoverflow com questions 47250025 qthreadpool how to interrupt how to use wisely the wait
  • 将 Psyco 移植到 64 位可能存在哪些陷阱?

    心理医生说 仅供参考 Psyco 不 可以在任何 64 位系统上工作 这个事实值得再次注意 现在最新的 Mac OS X 10 6 雪豹 自带默认 64 位上的 64 位 Python 机器 使用 Psyco 的唯一方法 OS X 10 6
  • 在 CSS 中将文本垂直和水平居中在圆圈中(如 iphone 通知徽章)

    我正在寻找一种在 CSS3 中制作类似 iphone 的跨浏览器徽章的方法 我显然想使用一个 div 来实现这一点 但其他解决方案也可以 重要的因素是它需要在所有浏览器中水平和垂直居中 关于这些通知的一个有趣的设计问题是它们不能具有指定的宽
  • 如何解析/proc/pid/cmdline

    我试图在 Linux 上拆分进程的命令行 但似乎我不能依赖它用 0 字符分隔 你知道为什么有时 0 字符用作分隔符而有时它是常规空格吗 您知道检索可执行文件名称及其路径的其他方法吗 我一直在尝试使用 ps 获取此信息 但它总是返回完整的命令
  • C++11 嵌套宏调用?

    它在 C std 16 3 4 中说 生成的预处理标记序列 来自宏调用替换 与源文件的所有后续预处理标记一起重新扫描 以获取更多宏名称 代替 如果在替换列表扫描期间找到了被替换的宏的名称 不包括 源文件的其余预处理标记 它不会被替换 此外
  • Lua 中的“主”函数?

    在 python 中 通常会定义一个 main 函数 以便允许脚本用作模块 如果需要 def main print Hello world return 0 if name main sys exit main 在Lua中 这个习语if n
  • 用于改造响应代码处理的自定义 rx Func1

    我是 rxjava 的新手 所以请不要严格 我请求虱子下一个 Observable
  • 当我使用大量数据发出大量请求后,Volley 出现内存不足异常

    我有一个页面查看器 在每个页面内都有列表视图 该列表视图将使用 Web 服务有 10 条记录 因此页面查看器使用 Web 服务的三个调用来填充三个页面 当前页面 左侧页面和右侧页面 页 但在我进行了多次滑动后 我得到了这个异常 java l
  • PostgreSQL ORDER BY 问题 - 自然排序

    我有一个 PostgresORDER BY下表的问题 em code name EM001 AAA EM999 BBB EM1000 CCC 要将新记录插入表中 我选择最后一条记录SELECT FROM employees ORDER BY
  • mongo 数据库中的可尾游标超时

    我正在尝试用 ruby 创建一个 oplog 观察器 到目前为止 我想出了下面的一个小脚本 require rubygems require mongo db Mongo Connection new localhost 5151 db l
  • glsl 双精度顶点缓冲区

    如果我创建一个双精度顶点缓冲区 例如 GLuint vertBuffer spanBuffer spanCount patchSize program already setup glUseProgram program glEnableC
  • 无法使用“adb shell settings put”设置 location_providers_allowed 的值

    我正在尝试使用以下命令打开位置 adb shell settings put secure location providers allowed gps wifi network adb reboot 但它既不改变变量的值允许的位置提供者重
  • Antlr3:无法匹配词法分析器规则中使用的解析器规则中的标记

    我在 Antlr3 中的词法分析器规则为 HYPHEN TOKEN HYPHEN CHARS CHARS a z 解析器规则如下 exp CHARS some complex expression parser rule exp HYPHE
  • 使用梯形图程序将 TCP/IP 消息从 PLC 发送到 PC

    考虑以下梯形图程序 该程序检查连接是否已启用 A202 00 然后从 PLC 向 PC 发送消息 文档 Omron CX Programmer 严重缺乏对程序约定的解释 我不明白的是 从一个节点向另一个节点发送消息 我应该需要指定接收者 I
  • 限制“鼠标滚轮”增量每次滚动触发一次

    我使用下面的代码 向不同方向滚动两个 div 但我很好奇是否可以限制滚动 以便每次滚动只触发一次 而不是不断滚动并将我的函数发送到无限循环 page left page right bind mousewheel function even