使用引导程序检查元素是否对用户可见
check if element is user visible using boostrap
我在 Whosebug 上浏览了很多解决方案来检查某个元素当前是否在用户的窗格中可见,但其中 none 在使用 bootstrap 时似乎有效。
如果右侧的 jsfiddle 结果屏幕大到足以显示右侧的列,则会显示 'OK' 警报。但是,如果右列低于首屏,那么当用户滚动到元素所在的位置时,我不会收到任何警报。
https://jsfiddle.net/play75010/xjuj49kr/5/
这里我使用的是在 Whosebug 上找到的 checkVisible(),但我已经用许多其他解决方案对其进行了检查。
有什么想法吗?
function checkVisible( elm, evalType ) {
evalType = evalType || "visible";
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
if (evalType === "above") return ((y < (vpH + st)));
}
尝试检查滚动可能是您要查找的内容:
$(window).scroll( function() {
update();
console.log('fire');
});
我在 Whosebug 上浏览了很多解决方案来检查某个元素当前是否在用户的窗格中可见,但其中 none 在使用 bootstrap 时似乎有效。
如果右侧的 jsfiddle 结果屏幕大到足以显示右侧的列,则会显示 'OK' 警报。但是,如果右列低于首屏,那么当用户滚动到元素所在的位置时,我不会收到任何警报。
https://jsfiddle.net/play75010/xjuj49kr/5/
这里我使用的是在 Whosebug 上找到的 checkVisible(),但我已经用许多其他解决方案对其进行了检查。
有什么想法吗?
function checkVisible( elm, evalType ) {
evalType = evalType || "visible";
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
if (evalType === "above") return ((y < (vpH + st)));
}
尝试检查滚动可能是您要查找的内容:
$(window).scroll( function() {
update();
console.log('fire');
});