Detect if a page has a vertical scrollbar?

Asked
Active3 hr before
Viewed126 times

9 Answers

verticalscrollbar
90%

The best way to check is rather than using the height, you can actually use the width to determine this. You might realize if a scroll bar exists, a width of the document body should has been reduced to allocated the scroll bar width. So you can use the following solution to test it. Well if we think carefully, it actually doesn't make sense. But in reality it does, this is called the reversed thinking solution ;-).,If you try to search this particular topic in Google Search, you will come up with a list of different solutions. Most of them will use the document or body height to compare if there is a difference, we assume there will be a scroll bar. Unfortunately it doesn't work well, most of them it will return the same height. The following example of codes, I find it cannot determine if a scroll bar exists.

If you try to search this particular topic in Google Search, you will come up with a list of different solutions. Most of them will use the document or body height to compare if there is a difference, we assume there will be a scroll bar. Unfortunately it doesn't work well, most of them it will return the same height. The following example of codes, I find it cannot determine if a scroll bar exists.

if (document.body.scrollHeight > document.body.clientHeight) {}

//or using JQuery to determine the scroll bar.
if ($(document).height() > $(window).height()) {}
load more v
88%

I tried the previous answer and doesn't seem to be working the $("body").height() does not necessarily represent the whole html height., this works fine but if you add height to body height: 100% then this will NOT work. – Syed Jun 4 at 4:07 , 2 Just thought I'd mention that I had to use $(document) instead of $("body"), this worked for me when body didn't (I have an absolute positoned container with an aspect ratio on width/height) – am_ Jun 12 '14 at 12:26 , @TiuTalk for me $("body").height() & $(window).height() gives same value, instead I use $(document).height() > $(window).height() it works for me. – SarangK Oct 4 '16 at 5:08

$(document).ready(function() {
   // Check if body height is higher than window height :)
   if ($("body").height() > $(window).height()) {
      alert("Vertical Scrollbar! D:");
   }

   // Check if body width is higher than window width :)
   if ($("body").width() > $(window).width()) {
      alert("Horizontal Scrollbar! D:<");
   }
});
load more v
72%

No Comments on How to Detect if a Page has a Vertical Scrollbar with JavaScript? ,Sometimes, we want to detect if a page has a vertical scrollbar with JavaScript.,In this article, we’ll look at how to detect if a page has a vertical scrollbar with JavaScript.,We can use the document.body.scrollHeight to get the full height of the content, including the content off the screen.

To do this, we write:

const hasVScroll = document.body.scrollHeight > document.body.clientHeight;
console.log(hasVScroll)
65%

Check whether HTML element has scrollbars using JavaScript,Select the particular element.,How to get the position of scrollbar using JavaScript ?,Scroll to the top of the page using JavaScript/jQuery

75%

I just want some simple JQ/JS to check if the current page/window (not a particular element) has a vertical scrollbar.,Googling gives me stuff that seems overly complex for just this basic feature.,Oddly none of these solutions tell you if a page has a vertical scrollbar.,The function returns true or false depending whether the page has a vertical scrollbar or not.

Answer #1:

$(document).ready(function() {
   // Check if body height is higher than window height :)
   if ($("body").height() > $(window).height()) {
      alert("Vertical Scrollbar! D:");
   }

   // Check if body width is higher than window width :)
   if ($("body").width() > $(window).width()) {
      alert("Horizontal Scrollbar! D:<");
   }
});
load more v
40%

#javascript #javascript #functions #parameters , #javascript #nodejs #commandline , #javascript , #javascript #jquery

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;
load more v
22%

So if the scroll bar is at the very top, the value of $(window).scrollTop() will be Zero. Similarly if the value of the browser viewport + vertical position of scroll bar = document height, then the user has scrolled to the bottom of the page.,$(window).height() - returns height of browser viewport$(document).height() - returns height of HTML document$(window).scrollTop() – returns the current vertical position of the scroll bar. , This is great! Is it possible to trigger another alert once the user begins scrolling up again? say if they scroll up 30px from the bottom of the page? ,Here’s a simple way to detect if the user has scrolled to the Top or Bottom of the page using jQuery

Here’s a simple way to detect if the user has scrolled to the Top or Bottom of the page using jQuery

<html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>Detect if User Scrolled - DevCurry.com</title>    <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">    </script>     <script type="text/javascript" language="javascript">         $(function () {             var $win = $(window);             $win.scroll(function () {                 if ($win.scrollTop() == 0)                     alert('Scrolled to Page Top');                 else if ($win.height() + $win.scrollTop()                                == $(document).height()) {                     alert('Scrolled to Page Bottom');                 }             });         });    </script></head><body>    <div>Page Top</div><br />       <div style="height:1200px"></div>    <div>Page Bottom</div></body></html>
60%

For example, I’d like to do a check to see if the scrollbar exists and is pushing the content over and, if so, then add a class to the body. How would this be done?,This works for most browsers. Basically it checks to see if the width of the window element (read: including scrollbars) is greater than the width of the root element of the page (read: without scrollbars). If the width of the page with scrollbars is greater than the width of a page without scrollbars it would stand to reason that the extra width is a scrollbar.,One thing to check is the scrollHeight. If the scrollHeight of the root element is greater than the clientHeight of the root element, then that root element is going to need to scroll to show the overflowing content:,window.innerWidth doesn’t exist on IE8. Any workarounds you see utilizing document.documentElement will not include scrollbars in the reported width, so document.docutmentElement will not be an adequate substitute in < IE9.

var hasScrollbar = window.innerWidth > document.documentElement.clientWidth
load more v
48%

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* returns true/false */

Other "vertical-scrollbar" queries related to "Detect if a page has a vertical scrollbar?"