检测滚动意图答案

【问题标题】：Detect scroll intent检测滚动意图
【发布时间】：2012-09-10 21:59:25
【问题描述】：

我曾经看过一篇关于以下问题的脚本或文章：

想象一个可滚动的页面，其中包含多个可滚动的元素。向下滚动页面时，光标将遇到可滚动的元素，它们将获得焦点。导致必须从该元素上移除光标，或向下滚动该元素，然后才能再次滚动整个页面。

我看到的演示通过仅关注光标移动或某种滚动中断后的可滚动元素来解决该问题。因此，当您向下滚动页面时，您可以继续滚动（浮动在可滚动元素上）而不会中断。

有人知道我在说什么脚本吗？

【问题讨论】：

我建议您不要按用户预期的行为更改此设置！
@Bondye 您发布（和删除）的主题是完全不同的问题

标签： javascript jquery

【解决方案1】：

如果我理解没问题，请告诉我：如果你想检测滚动事件，那么你必须使用 jquery 页面中的scroll()。

试试这个例子：

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>
<script>
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $(window).scroll(function () { 
      $("span").css("display", "inline").fadeOut("slow"); 
    });

</script>

</body>
</html>

看这里的演示：http://jsfiddle.net/4M7XK/（最小化右下块的高度）

【讨论】：

【解决方案2】：

很抱歉，我现在不是您所指的原始文章，但这里有一个想法，我将如何使其发挥作用。

一旦用户开始滚动。（例如来自 jQuery 的 $(window).scroll(function(){...}) ），我会放置一个空的 div 从上到下覆盖整个页面。该元素将高于所有其他可能滚动的 div，防止它们每次捕获滚动事件。 It 元素必须在几毫秒超时后删除。

$(window).scroll(function(){
var $cover = $('<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: '+ $(document).height() + 'px; z-index: 100000">asdasd</div>')
$cover.appendTo($("body"));
setTimeout(function(){
     $cover.remove();
},200); 
});

【讨论】：