IntersectionObserver

HTML

<div style="position:fixed; top:0px; white-space:pre-wrap; opacity:0.5; background:#ccf" id=log></div>
<div style="height:2000px;">
<p></p>
  <p>Log if a part of the SELECT element is visible, or the SELECT element is completely invisible.
  </p>
</div>
<select id=target><option>Option1</option></select>
<div style="height:2000px;"></div>

JavaScript

function log(str) {
  document.querySelector('#log').appendChild(document.createTextNode(str + "\n"));
}
function handleIntersection(records) {
  // |records| should have only one element because the observer
  // observes only one element.
  for (var record of records) {
    log("ID=" + record.target.id + " " +
      record.intersectionRect.width + "x" + record.intersectionRect.height +
      " ratio=" + record.intersectionRatio);
  }
}
var observer = new IntersectionObserver(
  handleIntersection,
  { threshold: [0.0] } 
);

observer.observe(document.querySelector('#target'));