检测滚动意图

时间:2012-09-10 13:15:58

标签: javascript jquery

我曾经遇到过关于以下问题的脚本或文章:

想象一个可滚动的页面,里面有多个也可滚动的元素。向下滚动页面时,光标将遇到可滚动的元素,它们将获得焦点。导致必须从该元素中移除光标,或者在您能够再次滚动整个页面之前向下滚动该元素。

我看到的演示通过仅关注光标移动后的可滚动元素或滚动的某种中断来解决该问题。因此,当您向下滚动页面时,您可以不间断地滚动(浮动在可滚动元素上)。

有谁知道我在说什么剧本?

2 个答案:

答案 0 :(得分:0)

如果我理解了,那么请告诉我:如果你想检测滚动事件,那么你必须从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/(最小化右下方块的高度)

答案 1 :(得分:0)

我很抱歉,但我现在不是您所指的原始文章,但我知道如何让它发挥作用。

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

$(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); 
});