我曾经遇到过关于以下问题的脚本或文章:
想象一个可滚动的页面,其中包含多个元素,这些元素也是可滚动的。向下滚动页面时,光标将遇到可滚动的元素,它们将获得焦点。导致必须从该元素中删除光标,或向下滚动该元素,然后才能再次滚动整个页面。
我看到的演示通过仅在光标移动或某种滚动中断后关注可滚动元素来解决该问题。因此,当您向下滚动页面时,您可以继续滚动(浮动在可滚动元素上)而不会中断。
有谁知道我在说什么脚本?
我曾经遇到过关于以下问题的脚本或文章:
想象一个可滚动的页面,其中包含多个元素,这些元素也是可滚动的。向下滚动页面时,光标将遇到可滚动的元素,它们将获得焦点。导致必须从该元素中删除光标,或向下滚动该元素,然后才能再次滚动整个页面。
我看到的演示通过仅在光标移动或某种滚动中断后关注可滚动元素来解决该问题。因此,当您向下滚动页面时,您可以继续滚动(浮动在可滚动元素上)而不会中断。
有谁知道我在说什么脚本?
很抱歉,但我现在不是您所指的原始文章,但这里有一个想法,我将如何使其工作。
一旦用户开始滚动。(例如来自 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);
});
如果我理解好,请告诉我:如果你想检测滚动事件,那么你必须使用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/(最小化右下块的高度)