草庐IT

javascript - 区分鼠标滚轮滚动还是滚动条滚动？

coder 2025-03-15 原文

我在 Stackoverflow 上进行了搜索，但似乎找不到这个问题的满意答案。基本上我想知道滚动是通过鼠标滚轮还是浏览器滚动条完成的。

最佳答案

类似这样的方法可能适合您，但它不是最佳解决方案。

如果 wheel 事件恰好发生在 scroll 事件之前，则滚动是通过轮子完成的，否则它是通过使用轮子之外的其他东西来完成的。触发的两个事件之间存在细微的时间差异，这就是为什么我使用阈值 currTime - lastWheelTime > 30。

$('.test').on('scroll wheel DOMMouseScroll mousewheel', function(e) {
    var lastWheelTime,
        currTime = (new Date()).getTime(); 

    if( e.type === 'scroll' ) {
        lastWheelTime = $(this).data().lastWheelTime || 0;

        if( currTime - lastWheelTime > 30 ) {
           $('.info').text('no wheel');
        } else {
           $('.info').text('with wheel');
        }

    } else {
        $(this).data().lastWheelTime = (new Date()).getTime(); 
    }
});
.test {
    width: 200px;
    height: 300px;
    border: 1px solid red;
    overflow: auto;
}
 
.inner {
    height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="info"></div>
<div class="test">
    <div class="inner"></div>
</div>

关于javascript - 区分鼠标滚轮滚动还是滚动条滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27512641/

javascript滚动sectioncodelastWheelTimejquery

有关javascript - 区分鼠标滚轮滚动还是滚动条滚动？的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby-on-rails - Ruby 流量控制 : throw an exception, 返回 nil 还是让它失败？ - 2

    我在思考流量控制的最佳实践。我应该走哪条路？1)不要检查任何东西并让程序失败(更清晰的代码，自然的错误消息):defself.fetch(feed_id)feed=Feed.find(feed_id)feed.fetchend2)通过返回nil静默失败(但是，“CleanCode”说，你永远不应该返回null):defself.fetch(feed_id)returnunlessfeed_idfeed=Feed.find(feed_id)returnunlessfeedfeed.fetchend3)抛出异常(因为不按id查找feed是异常的):defself.fetch(feed_id

  3. ruby - 使用哪个，eruby 还是 erb？ - 2

    eruby和erb有什么区别？哪些考虑因素会促使我选择其中之一？我的应用程序正在为网络设备(路由器、负载平衡器、防火墙等)生成配置文件。我的计划是对配置文件进行模板化，在源文件中使用嵌入式ruby​​(通过eruby或erb)来执行诸如迭代生成路由器的所有接口(interface)配置block之类的操作(这些block都非常相似，仅在标签上有所不同和IP地址)。例如，我可能有这样一个配置模板文件:hostnamesample-routerlogging10.5.16.26当通过嵌入式ruby​​解释器(erb或eruby)运行时，会产生以下输出:hostnamesample-rout

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. ruby-on-rails - Rails 存在吗？不区分大小写 - 2

    Model.exists?("lower(email)=?",params[:email].downcase)返回错误:ArgumentError(参数数量错误(2代表0..1)):是否可以使用不区分大小写的匹配来执行exists?？ 最佳答案 您需要做的就是:Model.exists?(["lower(email)=?",params[:email].downcase])它正在寻找一个参数，但您提供了两个。使用数组形式和查找式条件应该可以满足您的需求。 关于ruby-on-rails-

  6. ruby-on-rails - Ruby on Rails - 参数是方法还是散列？ - 2

    所以，我正在尝试RubyonRails指南的入门部分here.我不明白line在本教程中。引用它:Theparamsmethodistheobjectwhichrepresentstheparameters(orfields)cominginfromtheform.我以前确实有一些Rails方面的经验，而且我一直假设params是一个散列。但这里他们称之为方法，它是一个对象。params是方法还是哈希？还有，在ruby中，方法也是对象吗？ 最佳答案 params是一个返回ActionController::Parameters对象的

  7. 适用于Web开发的Python还是Ruby？ - 2

    Asitcurrentlystands,thisquestionisnotagoodfitforourQ&Aformat.Weexpectanswerstobesupportedbyfacts,references,orexpertise,butthisquestionwilllikelysolicitdebate,arguments,polling,orextendeddiscussion.Ifyoufeelthatthisquestioncanbeimprovedandpossiblyreopened,visitthehelpcenter提供指导。11年前关闭。我是一位精通HTML

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby - 如何在 Cucumber 表(多行参数)中使用正则表达式来区分表？ - 2

    我正在使用场景表(multilinesteparguments)使用内置的.diff来使用cucumber检查来自屏幕的一些数据!CucumberAST表上的方法。我想检查内容是否与正则表达式匹配。Scenario:OneThenthetableappearsas:|One|Two|Three||/\d+/|/\d+/|/\d+/|实际的表格看起来像|One|Two|Three||123|456|789|这个场景翻译成“只要有几个数字，我不在乎”失败的示例步骤实现:Then/^thetableappearsas:$/do|expected_table|actual_table=[['O

随机推荐