Question

我正在尝试查找可见或隐藏的元素（按钮）。但不起作用。

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>

Demo

Answer 1

发生这种情况是因为您使用父容器的顶部边框来检测按钮的可见性。要解决此问题，您应该将父高添加到父滚动中。 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();

Answer 2

这就是您所需要的。考虑您的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();

按可见或隐藏查找元素不起作用

2 个答案: