gpt4 book ai didi

jquery - 如果元素的某些部分超出视口(viewport),如何使用 jquery 检查

转载 作者:行者123 更新时间:2023-11-28 08:27:17 25 4
gpt4 key购买 nike

我如何使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com