simonewebdesign · October 8, 2023 15:32 · mdsohelmia · Apr 7, 2020 · panesardev · Sep 11, 2020
diff --git a/scroll.html b/scroll.html
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>

  <style>
    .content {
      width: 300px;
      height: 200px;
      overflow-y: scroll;
    }
  </style>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer cursus neque sit amet auctor ultrices. Nam dui urna, aliquam vel consequat eu, sagittis in velit. Integer in libero eget tortor varius malesuada sit amet at turpis. Fusce hendrerit tortor molestie justo malesuada, vitae pharetra dolor ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin vestibulum justo quis massa commodo consequat.</p>
    <p>Mauris consectetur urna quis tempus posuere. Nunc faucibus erat quis fermentum feugiat. Quisque malesuada fermentum ipsum, ac cursus tortor auctor vitae. Suspendisse nisi velit, tincidunt sit amet metus ut, mattis interdum leo. Donec eget mi et orci iaculis commodo. Duis congue est neque, id tempor ligula sodales feugiat. Mauris a dolor odio. Nulla ac libero ut diam interdum semper sed nec nisi. Fusce ac eros nisi. Curabitur dignissim rutrum velit, vitae porta metus mattis. Donec mollis facilisis leo, ut varius justo faucibus at.</p>
    <p>Cras aliquet turpis et est ullamcorper gravida. Etiam bibendum ante ante, ac consequat ligula mollis id. Nunc venenatis porta rhoncus. Ut sed molestie ipsum. Donec varius, purus ut consectetur luctus, dui lectus eleifend elit, et aliquet nibh ligula vitae orci. Praesent pretium erat a nisl vehicula ornare et nec nisl.</p>
  </div>

  <button class="btn">Go to the bottom</button>

  <script src="scroll.js"></script>
 </body>
 </html>
diff --git a/scroll.js b/scroll.js
 ;(function () {

  var container = document.querySelector('.content')

  container.maxScrollTop = container.scrollHeight - container.offsetHeight

  document.querySelector('.btn').addEventListener('click', function () {

    if (container.maxScrollTop - container.scrollTop <= container.offsetHeight) {
      // We can scroll to the bottom.
      // Setting scrollTop to a high number will bring us to the bottom.
      // setting its value to scrollHeight seems a good idea, because
      // scrollHeight is always higher than scrollTop.
      // However we could use any value (e.g. something like 99999 should be ok) 
      container.scrollTop = container.scrollHeight
      console.log("I just scrolled to the bottom!")

    } else {
      console.log("I won't scroll: you're way too far from the bottom!\n" +
      "You should maybe alert the user that he received a new message.\n" +
      "If he wants to scroll at this point, he must do it manually.")
    }

  }, false)


  // Logging stuff in the console. You can call this for debugging purposes.
  function debug() {
    // scrollTop gets or sets the number of pixels
    // that the content of an element is scrolled upward.
    console.log('scrollTop', container.scrollTop)

    // scrollHeight is the height of the scroll view of an element 
    // (in other words, the whole content's height). 
    // It includes the element padding but not its margin.
    console.log('scrollHeight', container.scrollHeight)

    // offsetHeight is the height of an element relative to 
    // the element's offsetParent. 
    // In other words, it's the viewport, and it's constant.
    // clientHeight is the same, but you shouldn't use it, 
    // because it's not part of any standard.
    console.log('offsetHeight', container.offsetHeight)

    // maxScrollTop is the maximum value that scrollTop can assume.
    // We are defining it as a constant, but you can as well put it in a function
    // in case the viewport's height (offsetHeight) is variable.
    console.log('maxScrollTop', container.maxScrollTop)

    // offsetParent returns a reference to the object which is the closest 
    // (nearest in the containment hierarchy) positioned containing element.
    // I actually don't need this for the demo, 
    // but it may be useful in some cases.
    // console.log(container.offsetParent)
  }

 })();
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>

	<style>
	.content {
	width: 300px;
	height: 200px;
	overflow-y: scroll;
	}
	</style>

	<div class="content">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer cursus neque sit amet auctor ultrices. Nam dui urna, aliquam vel consequat eu, sagittis in velit. Integer in libero eget tortor varius malesuada sit amet at turpis. Fusce hendrerit tortor molestie justo malesuada, vitae pharetra dolor ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin vestibulum justo quis massa commodo consequat.</p>
	<p>Mauris consectetur urna quis tempus posuere. Nunc faucibus erat quis fermentum feugiat. Quisque malesuada fermentum ipsum, ac cursus tortor auctor vitae. Suspendisse nisi velit, tincidunt sit amet metus ut, mattis interdum leo. Donec eget mi et orci iaculis commodo. Duis congue est neque, id tempor ligula sodales feugiat. Mauris a dolor odio. Nulla ac libero ut diam interdum semper sed nec nisi. Fusce ac eros nisi. Curabitur dignissim rutrum velit, vitae porta metus mattis. Donec mollis facilisis leo, ut varius justo faucibus at.</p>
	<p>Cras aliquet turpis et est ullamcorper gravida. Etiam bibendum ante ante, ac consequat ligula mollis id. Nunc venenatis porta rhoncus. Ut sed molestie ipsum. Donec varius, purus ut consectetur luctus, dui lectus eleifend elit, et aliquet nibh ligula vitae orci. Praesent pretium erat a nisl vehicula ornare et nec nisl.</p>
	</div>

	<button class="btn">Go to the bottom</button>

	<script src="scroll.js"></script>
	</body>
	</html>
	;(function () {

	var container = document.querySelector('.content')

	container.maxScrollTop = container.scrollHeight - container.offsetHeight

	document.querySelector('.btn').addEventListener('click', function () {

	if (container.maxScrollTop - container.scrollTop <= container.offsetHeight) {
	// We can scroll to the bottom.
	// Setting scrollTop to a high number will bring us to the bottom.
	// setting its value to scrollHeight seems a good idea, because
	// scrollHeight is always higher than scrollTop.
	// However we could use any value (e.g. something like 99999 should be ok)
	container.scrollTop = container.scrollHeight
	console.log("I just scrolled to the bottom!")

	} else {
	console.log("I won't scroll: you're way too far from the bottom!\n" +
	"You should maybe alert the user that he received a new message.\n" +
	"If he wants to scroll at this point, he must do it manually.")
	}

	}, false)


	// Logging stuff in the console. You can call this for debugging purposes.
	function debug() {
	// scrollTop gets or sets the number of pixels
	// that the content of an element is scrolled upward.
	console.log('scrollTop', container.scrollTop)

	// scrollHeight is the height of the scroll view of an element
	// (in other words, the whole content's height).
	// It includes the element padding but not its margin.
	console.log('scrollHeight', container.scrollHeight)

	// offsetHeight is the height of an element relative to
	// the element's offsetParent.
	// In other words, it's the viewport, and it's constant.
	// clientHeight is the same, but you shouldn't use it,
	// because it's not part of any standard.
	console.log('offsetHeight', container.offsetHeight)

	// maxScrollTop is the maximum value that scrollTop can assume.
	// We are defining it as a constant, but you can as well put it in a function
	// in case the viewport's height (offsetHeight) is variable.
	console.log('maxScrollTop', container.maxScrollTop)

	// offsetParent returns a reference to the object which is the closest
	// (nearest in the containment hierarchy) positioned containing element.
	// I actually don't need this for the demo,
	// but it may be useful in some cases.
	// console.log(container.offsetParent)
	}

	})();