我如何使用 Jquery 检测元素(哪个位置是absolute)是否水平超出视口(viewport)并将其设置为 left: 0(以适应视口(viewport)中的该元素)当 body 具有 overflow: hidden 属性时。
这是我的标记。
<!DOCTYPE html>
<html>
<head>
<style>
body,html{overflow: hidden;}
div{
position: absolute; width: 100%; margin-left: 30%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
最佳答案
您需要在 jQuery 中执行以下比较:
var window_width = $(window).width();
var offset_left = $("div").offset().left;
var offset_right = $("div").offset().left + $("div").width();
var scroll_left;
var sum;
$("button").click(function(){
scroll_left = $(window).scrollLeft();
sum = window_width + scroll_left;
if(sum >= offset_left && scroll_left <= offset_right)
alert("visible");
else
alert("not visible");
});div{
position: absolute;
width: 100%;
margin-left: 120%;
background:yellow;
height:200px;
}
button{
position:fixed;
top:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
<button>Check</button>关于jquery - 如果元素的某些部分超出视口(viewport)，如何使用 jquery 检查，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28480406/