CODEWITHSUNDEEP
javascripthtml
3gwebtrain
3gwebtrain

Reputation: 15293

Finding element by visible or hidden not works

I am trying to find a element(button) either visible to view or hidden. but not works. 

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

Upvotes: 1

Views: 88

Answers (2)

Ed Bangga
Ed Bangga

Reputation: 13006

This is what you need. Consider your div offsetHeight which is 104 including borders pixels.

            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();

Upvotes: 1

DShadrin
DShadrin

Reputation: 161

It happens because you use top border of your parent container to detect button visibility. To fix this you should add your parent height to your parent scroll. scrollTop returns scroll amount from top border. You can check is button visible inside parent container using next code:

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();

Upvotes: 2

Related Questions