Sun Dial Menu
Element.scrollHeight
Tempusfugit UK
 

Element.scrollHeight

This property was seen when analysing the accordian technique.

Once again in researching a particular aspect of css or html coding I came accross an example that prompted me to think "I wondered how they did that?". In this case it was a scrolling box that you had to scroll fully to the bottom before you could agree that you had read it.

The MDN Example - The license agreement

The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. The height is measured in the same way as clientHeight: it includes the element's padding, but not its border, margin or horizontal scrollbar (if present). It can also include the height of pseudo-elements such as ::before or ::after. If the element's content can fit without a need for vertical scrollbar, its scrollHeight is equal to clientHeight

Top Menu

The MDN Example

Top Menu

The code

The "notice" box and the "rules" are styled as below:

<style>
#notice {
  display: inline-block;
  margin-bottom: 12px;
  border-radius: 5px;
  width: 600px;
  padding: 5px;
  border: 2px #7FDF55 solid;
}

#rules {
  width: 600px;
  height: 130px;
  padding: 5px;
  border: #2A9F00 solid 2px;
  border-radius: 5px;
}
</style>

The following function is called when the page is loaded:

script>
function checkReading () {
  if (checkReading.read) {
    return; 
  }
  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
  checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
}

onload = function () {
  var oToBeRead = document.getElementById("rules");
  checkReading.noticeBox = document.createElement("span");
  document.registration.accept.checked = false;
  checkReading.noticeBox.id = "notice";
  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
  oToBeRead.onscroll = checkReading;
  checkReading.call(oToBeRead);
}
/script>

Enhancements

To confirm that a user has actually read the agreement, as opposed to just scrolling to the end, text is added that has to be entered for process to continue.

Top Menu

Links

Top Menu

Site design by Tempusfugit Web Design -