jQuery 鼠标滚轮不支持触控板?

2024-02-15

我用的是流行的鼠标滚轮 https://github.com/brandonaaron/jquery-mousewheel插件来模拟全页滚动,例如这个网站 http://onlinedepartment.nl/#values.

jQuery(function() {
    var top = 0,
        viewport = jQuery(window).height(),
        step = jQuery(".home .l-section:first").outerHeight(),
        body = jQuery.browser.webkit ? jQuery('body') : jQuery('html'),
        wheel = false;
    jQuery('body').mousewheel(function(event, delta) {
        wheel = true;
        if (delta < 0) {
            top = (top + viewport) >= jQuery(document).height() ? top : top += step;
            body.stop().animate({
                scrollTop: top
            }, 400, function() {
                wheel = false;
            });
        } else {
            top = top <= 0 ? 0 : top -= step;
            body.stop().animate({
                scrollTop: top
            }, 400, function() {
                wheel = false;
            });
        }
        return false;
    });
    jQuery(window).on('resize', function(e) {
        viewport = jQuery(window).height();
        step = jQuery(".home .l-section:first").outerHeight();
    });
    jQuery(window).on('scroll', function(e) {
        if (!wheel) top = jQuery(this).scrollTop();
    });
});

它工作得很好,但在使用触控板时却不行。使用触控板,无论我滚动的速度有多慢,它都会滚动到页面底部。


与我的笔记本电脑的触控板配合良好。但是,这是已知问题,您尝试过使用去抖吗?

function mouseHandle(event) {
    newDate = new Date();
    var scrollAllowed = true;

    if( wheel < 10 && (newDate.getTime()-oldDate.getTime()) < 100 ) {
        scrollPos -= event.deltaY*(10-wheel);
        wheel++;
    }
    else {
        if( (newDate.getTime()-oldDate.getTime()) > 100 ) {
            wheel = 0;
            scrollPos -= event.deltaY*60;
        }
        else {
            scrollAllowed = false;
        }
    }

    oldDate = new Date();

    if( scrollAllowed ) {
        // do your stuff here
    }
}

//Apply this effect with jQuery On event
$('body').on('mousewheel', function(event) { mouseHandle(event); });

这里已经报告了这个问题:https://github.com/brandonaaron/jquery-mousewheel/issues/36 https://github.com/brandonaaron/jquery-mousewheel/issues/36

您将在那里获得多种解决方案。希望有帮助。帮助自己:-)

Peace,

Rahul

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 鼠标滚轮不支持触控板? 的相关文章

  • 将变换值添加到元素上已有的当前变换中?

    假设我有一个div那有translateX and translateY动态添加的值 div class object child0 style width 50px height 50px 我想添加rotateY 20deg 到当前的变换
  • jQuery Cycle 插件 - 如何返回当前显示幻灯片的索引号?

    我目前正在使用Malsup 的 Cycle 插件 http jquery malsup com 我只是想知道是否可以让循环插件返回当前显示幻灯片的索引号 我想在特定幻灯片处于活动状态时更改页面内容 不知道如何实现这一点 你可以这样做 on
  • jquery/javascript 处理后移至命名锚点

    在进行一些 jquery 处理后 如何将焦点移动到同一页面上的不同部分 名为锚点 函数 ABC 进行一些处理 然后 我需要将用户移动到同一页面上的某个部分 页面下方 您可以使用下面的代码将屏幕滚动到 div 只需更改选择器以匹配您要滚动到的
  • 如何使用text()函数插入html文本? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我需要更改包含 html 的元素的内容 我尝试过这个 但是 html 标签被打印了 content sections label text
  • 使用 keyup 事件仅触发表单验证中文本框的部分规则,并取消其余规则的事件

    我的应用程序中有一个表单 我正在使用 jQuery 表单验证插件对其进行验证 其中一项规则是远程类型 用于验证用户名是否不存在 我已经能够覆盖 onkeyup 事件 因此规则不会为我输入的每个字母发送到服务器 我完成的方式如下 var va
  • JQuery UI - 无法更改模态对话框中日期选择器中的月份/年份

    Using 日期选择器里面一个模态对话框 不工作更改月份 年份Firefox 19 0 2 中的下拉列表请参阅 http jsfiddle net 469zV 2 http jsfiddle net 469zV 2 HTML div tit
  • 在 IE 中,jquery 的“X-Requested-With”标头变为“x-requested-with”(小写)

    为什么要转换为小写 在 Firefox 中 它的形式为 X Requested With 在 IE 中 它是 x requested with HTTP 方法应该区分大小写 但 HTTP 标头应该不区分大小写 根据RFC 2616 http
  • SlideUp() 在 jQuery 中如何工作?我正在尝试制作自己的slideRight()

    我看过jquery 中幻灯片的源代码 https github com jquery jquery blob master src effects js Generate shortcuts for custom animations jQ
  • Popper.js:点击外部时如何关闭弹出窗口

    我在用着波普尔 js https popper js org 显示具有该类的弹出元素 js share cf popover单击带有类的元素时 js share cf btn 但我希望只有当我在弹出窗口之外单击时才关闭弹出窗口 这是我显示弹
  • 使用 jquery 迭代 json 数组

    已经有一些帖子和我遇到了类似的问题 如何使用 PHP 中的 jQuery AJAX 调用迭代 JSON 数组 https stackoverflow com questions 6472338 how do i iterate over a
  • 检查复选框是否被选中? [复制]

    这个问题在这里已经有答案了 如何通过 jQuery 检查复选框是否被选中 我可以只向元素添加 ID 或类并执行此操作吗 if element val 1 do stuff if element is checked checkbox is
  • javascript - 动态变量

    您好 我正在尝试创建动态变量 但它说 变量 v0 到 v5 未定义 td each function i eval var v i this html 任何帮助将不胜感激 这听起来是个坏主意 你有什么理由不能这样做吗 var tdHtml
  • 页面其余部分完成加载后延迟加载 html5 视频

    我有一个视频元素用作我正在构建的页面底部部分的背景 我试图通过将 src 存储为 data src 属性并使用 jQuery 在其他资源加载后将其应用到 src 属性 因为它不是英雄图像或任何东西 我想加载海报以节省加载时间 然后稍后加载视
  • 使用javascript向url添加哈希而不滚动页面?

    在不滚动页面的情况下向 url 添加哈希 使用 JavaScript 我打开页面 我向下滚动 我单击添加哈希的链接 可能带有值 test 示例 http www example com test http www example com t
  • LibGdx 如何使用 OrthographicCamera 滚动?

    我已经找了 10 个小时 字面意思 我已经完成了 我需要问一下 事情是我正在学习如何使用 LibGdx 来编写 Java 游戏 我正在做一个水平太空飞船游戏 所以 我最糟糕的问题是我不知道如何滚动 我认为绘制会更好地解释 我想绘制一个巨大的
  • ajax 调用成功后点击链接 href

    我有一个正常的链接 a href http www google com class continue Continue a 我已将点击绑定到一个事件来发布 ajax 请求 如下所示 continue click function ajax
  • 如何消除 jQuery Mobile 中的悬停延迟?

    我正在使用 jQuery Mobile 制作一个网站 当我将鼠标悬停在按钮上时 它会更改其类 并扩展其颜色 但感觉需要半秒左右才能完成 有没有办法减少这种延迟 您可以覆盖hoverDelay无需修改 jQuery Mobile js 库 要
  • 如何制作实时jquery效果?

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo
  • jQuery - xpath 查找?

    如果您在 xml 中有下面的 xml 那么您会使用以下命令变得昏昏欲睡 xml find animal find dog find beagle text jQuery 中是否有类似的方法来使用 xpath xml xpathfind an
  • html 下钻下拉所选值未插入 MYSQL

    我有两个下拉列表 首先从数据库下拉填充 根据第一个下拉列表的选定值从数据库填充第二个下拉列表 document ready function c change function var c1 c selected text if c1 aj

随机推荐