我正在尝试查找可见或隐藏的元素(按钮)。但不起作用。
var newfun = function(){
var element = document.getElementById('parent');
var button = document.getElementById('button');
element.addEventListener('scroll', function(){
if((element.scrollTop + button.offsetHeight) > button.offsetTop ){
console.log('on visible');
return;
}
console.log('hidden');
});
}
newfun();
*{
padding:0;
margin:0;
}
.parent{
height:100px;
overflow-y:auto;
border:2px solid red;
}
<div id="parent" class="parent">
will type some info
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates praesentium similique pariatur at. Iste rem ratione veritatis officiis aliquid modi provident asperiores, ex porro quibusdam maiores impedit dolorum sit deserunt!</div>
<div>Et officiis earum, possimus doloribus harum odio aut enim, doloremque, culpa eaque ipsum. Dicta in hic quibusdam autem, excepturi. Unde fugiat nesciunt dolores animi repellendus, exercitationem, magnam iusto incidunt distinctio.</div>
<div>Minus dignissimos similique voluptas cum alias praesentium eos, inventore voluptatum est. Harum officia quo, maxime facere, explicabo ratione, voluptates inventore incidunt numquam cum sunt eos architecto, vero soluta saepe amet?</div>
<div>Enim quaerat ipsam inventore laboriosam odit eum rerum, magni aperiam. Mollitia, ratione, ex. Quidem iusto enim nobis quisquam impedit autem, commodi voluptates quaerat ipsam optio temporibus consequuntur, eos, voluptatibus deleniti.</div>
<div>Atque deserunt facilis consequatur quae eaque accusantium inventore ducimus voluptatem eius animi harum excepturi, reprehenderit earum minus distinctio hic tenetur enim veniam corrupti, blanditiis possimus doloribus qui! Voluptates, consectetur nostrum.</div>
<p>
<button id="button">
Click me
</button>
</p>
</div>
答案 0 :(得分:2)
发生这种情况是因为您使用父容器的顶部边框来检测按钮的可见性。要解决此问题,您应该将父高添加到父滚动中。 scrollTop从顶部边框返回滚动量。您可以使用以下代码检查父容器内的按钮是否可见:
var newfun = function(){
var element = document.getElementById('parent');
var button = document.getElementById('button');
element.addEventListener('scroll', function(){
if(checkVisibility(button, element)){
console.log('on visible');
return;
}
console.log('hidden');
})
}
function checkVisibility(elm, parent) {
var boundingRect = elm.getBoundingClientRect();
var parentHeight = parent.offsetHeight;
return !(boundingRect.bottom < 0 || boundingRect.top - parentHeight >= 0);
}
newfun();
答案 1 :(得分:1)
这就是您所需要的。考虑您的div offsetHeight为104,包括边框像素。
var newfun = function(){
var element = document.getElementById('parent');
var button = document.getElementById('button');
element.addEventListener('scroll', function(){
if(((element.scrollTop + element.offsetHeight + button.offsetHeight) > button.offsetTop)
&& (button.offsetTop + button.offsetHeight) > element.scrollTop
){
console.log('on visible');
return;
}
console.log('hidden');
})
}
newfun();