我想在包含多个选项卡的网页上有一个小部件。当用户滚动页面并且小部件进入查看并且他不断向下滚动时,应该一一激活选项卡(页面不会进一步向下滚动)。显示最后一个选项卡后,页面应恢复正常滚动。使用 JS/jQuery 可以吗?
更新: 因为这似乎是一个太宽泛的问题: 问题是,我不知道如何使用滚动偏移并防止页面向下滚动,直到我决定它可以恢复其正常行为
更新2 我创建了This fiddle ,
$(document).ready(function(){
$('#tabbed').mouseover(function(){
$(this).focus();
}).scroll(function(){
console.log("scrolling tabs");
});
$(window).scroll(function(evt){
var scrollPos = $(this).scrollTop()
console.log(scrollPos);
// BULLETPROOF WAY TO DETECT IF THE MOUSE IS OVER THE
// SCROLLABLE DIV AND GIVE IT FOCUS HERE?
});
});
它包含一个长页面和一个可滚动的 div 内容。唯一的问题是,只有当我移动鼠标时,div 才会开始捕获滚动事件。如果我能找到一种万无一失的方法来在鼠标悬停在滚动 div 上时激活它,我就在那里。有什么想法吗?
最佳答案
您无法使用 JavaScript 阻止滚动。仅当鼠标悬停在 iframe 和 div 上时,使用带滚动功能的 iframe 和 div 才有效。
您可以取消与滚动相关的鼠标滚轮和按键事件,但是用户将能够使用滚动条进行滚动(更多 here )。
另一种方法是留下一个空白区域并将您的小部件固定在该区域内,就像这样 working example
$(window).bind('scroll', function()
{
var scroll = $(window).scrollTop(),
innerHeight = window.innerHeight || $(window).height(),
fooScroll = $('#fooScroll'),
emptyArea = $('#emptyArea'),
offset = emptyArea.offset(),
fixedClass = 'fixed';
if(scroll > offset.top)
{
if(scroll < offset.top + emptyArea.height() - fooScroll.height())
{
fooScroll.addClass(fixedClass);
fooScroll.css("top", 0);
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", emptyArea.height() - fooScroll.height());
}
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", 0);
}
});
然后您可以在页面滚动时更改选项卡。
关于javascript - 根据鼠标滚动切换选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17022865/