blocks|key|1131503|text|$(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:<");
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1131504|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(document).ready(function() {
 // Check if body height is higher than window height :)
 if ($(&quot;body&quot;).height() &gt; $(window).height()) {
 alert(&quot;Vertical Scrollbar! D:&quot;);
 }

 // Check if body width is higher than window width :)
 if ($(&quot;body&quot;).width() &gt; $(window).width()) {
 alert(&quot;Horizontal Scrollbar! D:&lt;&quot;);
 }
});
</code></pre>

blocks|key|1346938|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1346939|var+hasVScroll+=+document.body.scrollHeight+>+document.body.clientHeight;|code-block|syntax|javascript|1346940|但是，这只会告诉您垂直scrollHeight是否大于可视内容的高度。hasVScroll变量将包含true或false。|offset|length|style|CODE|1346941|如果您需要进行更彻底的检查，请在上面的代码中添加以下代码：|1346942|//+Get+the+computed+style+of+the+body+element
var+cStyle+=+document.body.currentStyle%7C%7Cwindow.getComputedStyle(document.body,+"");

//+Check+the+overflow+and+overflowY+properties+for+"auto"+and+"visible"+values
hasVScroll+=+cStyle.overflow+==+"visible"+
+++++++++++++%7C%7C+cStyle.overflowY+==+"visible"
+++++++++++++%7C%7C+(hasVScroll+&&+cStyle.overflow+==+"auto")
+++++++++++++%7C%7C+(hasVScroll+&&+cStyle.overflowY+==+"auto");|1346943|entityMap^0|0|0|Z|A|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

try this:

<pre><code>var hasVScroll = document.body.scrollHeight &gt; document.body.clientHeight;
</code></pre>

This will only tell you if the vertical scrollHeight is bigger than the height of the viewable content, however. The <code>hasVScroll</code> variable will contain true or false.

If you need to do a more thorough check, add the following to the code above:

<pre><code>// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
 || cStyle.overflowY == "visible"
 || (hasVScroll &amp;&amp; cStyle.overflow == "auto")
 || (hasVScroll &amp;&amp; cStyle.overflowY == "auto");
</code></pre>

blocks|key|1347014|text|我尝试了前面的答案，但似乎不起作用$("body").height()不一定代表整个html高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1347015|我已经更正了这个解决方案，如下：|1347016|//+Check+if+body+height+is+higher+than+window+height+:)+
if+($(document).height()+>+$(window).height())+{+
++++alert("Vertical+Scrollbar!+D:");+
}+

//+Check+if+body+width+is+higher+than+window+width+:)+
if+($(document).width()+>+$(window).width())+{+
++++alert("Horizontal+Scrollbar!+D:<");+
}+|code-block|syntax|javascript|1347017|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I tried the previous answer and doesn't seem to be working the $("body").height() does not necessarily represent the whole html height.

I have corrected the solution as follows:

<pre><code>// Check if body height is higher than window height :) 
if ($(document).height() &gt; $(window).height()) { 
 alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() &gt; $(window).width()) { 
 alert("Horizontal Scrollbar! D:&lt;"); 
} 
</code></pre>

blocks|key|1131659|text|这一条对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1131660|function+hasVerticalScroll(node){
++++if(node+==+undefined){
++++++++if(window.innerHeight){
++++++++++++return+document.body.offsetHeight>+window.innerHeight;
++++++++}
++++++++else+{
++++++++++++return++document.documentElement.scrollHeight+>+
++++++++++++++++document.documentElement.offsetHeight+%7C%7C
++++++++++++++++document.body.scrollHeight>document.body.offsetHeight;
++++++++}
++++}
++++else+{
++++++++return+node.scrollHeight>+node.offsetHeight;
++++}
}|code-block|syntax|javascript|1131661|对于body，只需使用hasVerticalScroll()。|offset|length|style|CODE|1131662|entityMap^0|0|0|B|J|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This one did works for me:

<pre><code>function hasVerticalScroll(node){
 if(node == undefined){
 if(window.innerHeight){
 return document.body.offsetHeight&gt; window.innerHeight;
 }
 else {
 return document.documentElement.scrollHeight &gt; 
 document.documentElement.offsetHeight ||
 document.body.scrollHeight&gt;document.body.offsetHeight;
 }
 }
 else {
 return node.scrollHeight&gt; node.offsetHeight;
 }
}
</code></pre>

For the body, just use <code>hasVerticalScroll()</code>.

blocks|key|1131724|text|var+hasScrollbar+=+window.innerWidth+>+document.documentElement.clientWidth;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1131725|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var hasScrollbar = window.innerWidth &gt; document.documentElement.clientWidth;
</code></pre>

blocks|key|1347231|text|奇怪的是，这些解决方案都不会告诉你页面是否有垂直滚动条。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1347232|window.innerWidth+-+document.body.clientWidth会给出滚动条的宽度。这应该适用于任何IE9%2B+(未在较小的浏览器中测试)。(或者严格地回答这个问题，!!(window.innerWidth+-+document.body.clientWidth)|offset|length|style|CODE|1347233|为什么？假设您有一个页面，其中的内容比窗口高度高，用户可以向上/向下滚动。如果你在没有插入鼠标的Mac上使用Chrome，用户将看不到滚动条。插入鼠标，就会出现一个滚动条。(请注意，可以覆盖此行为，但这是默认的AFAIK)。|1347234|entityMap^0|0|0|19|2N|1D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]|$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

Oddly none of these solutions tell you if a page has a vertical scrollbar.

<code>window.innerWidth - document.body.clientWidth</code> will give you the width of the scrollbar. This should work in anything IE9+ (not tested in the lesser browsers). (Or to strictly answer the question, <code>!!(window.innerWidth - document.body.clientWidth)</code>

Why? Let's say you have a page where the content is taller than the window height and the user can scroll up/down. If you're using Chrome on a Mac with no mouse plugged in, the user will not see a scrollbar. Plug a mouse in and a scrollbar will appear. (Note this behaviour can be overridden, but that's the default AFAIK).

blocks|key|1347297|text|++++<script>
++++var+scrollHeight+=+document.body.scrollHeight;
++++var+clientHeight+=+document.documentElement.clientHeight;
++++var+hasVerticalScrollbar+=+scrollHeight+>+clientHeight;

++++alert(scrollHeight+%2B+"+and+"+%2B+clientHeight);+//for+checking+/+debugging.
++++alert("hasVerticalScrollbar+is+"+%2B+hasVerticalScrollbar+%2B+".");+//for+checking+/+debugging.
++++</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1347298|这个工具会告诉你是否有滚动条。我已经包含了一些可能有助于调试的信息，这些信息将显示为JavaScript警报。|unstyled|1347299|将其放入script标记中，放在结束body标记之后。|1347300|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code> &lt;script&gt;
 var scrollHeight = document.body.scrollHeight;
 var clientHeight = document.documentElement.clientHeight;
 var hasVerticalScrollbar = scrollHeight &gt; clientHeight;

 alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
 alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
 &lt;/script&gt;
</code></pre>

This one will tell you if you have a scrollbar or not. I've included some information that may help with debugging, which will display as a JavaScript alert.

Put this in a script tag, after the closing body tag.

blocks|key|1347135|text|我找到了瓦尼拉的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1347136|​|1347137|var+hasScrollbar+=+function()+{
++//+The+Modern+solution
++if+(typeof+window.innerWidth+===+'number')
++++return+window.innerWidth+>+document.documentElement.clientWidth

++//+rootElem+for+quirksmode
++var+rootElem+=+document.documentElement+%7C%7C+document.body

++//+Check+overflow+style+property+on+body+for+fauxscrollbars
++var+overflowStyle

++if+(typeof+rootElem.currentStyle+!==+'undefined')
++++overflowStyle+=+rootElem.currentStyle.overflow

++overflowStyle+=+overflowStyle+%7C%7C+window.getComputedStyle(rootElem,+'').overflow

++++//+Also+need+to+check+the+Y+axis+overflow
++var+overflowYStyle

++if+(typeof+rootElem.currentStyle+!==+'undefined')
++++overflowYStyle+=+rootElem.currentStyle.overflowY

++overflowYStyle+=+overflowYStyle+%7C%7C+window.getComputedStyle(rootElem,+'').overflowY

++var+contentOverflows+=+rootElem.scrollHeight+>+rootElem.clientHeight
++var+overflowShown++++=+/%5E(visible%7Cauto)$/.test(overflowStyle)+%7C%7C+/%5E(visible%7Cauto)$/.test(overflowYStyle)
++var+alwaysShowScroll+=+overflowStyle+===+'scroll'+%7C%7C+overflowYStyle+===+'scroll'

++return+(contentOverflows+&&+overflowShown)+%7C%7C+(alwaysShowScroll)
}|code-block|syntax|javascript|1347138|1347139|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

I found vanila solution

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var hasScrollbar = function() {
 // The Modern solution
 if (typeof window.innerWidth === 'number')
 return window.innerWidth &gt; document.documentElement.clientWidth

 // rootElem for quirksmode
 var rootElem = document.documentElement || document.body

 // Check overflow style property on body for fauxscrollbars
 var overflowStyle

 if (typeof rootElem.currentStyle !== 'undefined')
 overflowStyle = rootElem.currentStyle.overflow

 overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

 // Also need to check the Y axis overflow
 var overflowYStyle

 if (typeof rootElem.currentStyle !== 'undefined')
 overflowYStyle = rootElem.currentStyle.overflowY

 overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

 var contentOverflows = rootElem.scrollHeight &gt; rootElem.clientHeight
 var overflowShown = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
 var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

 return (contentOverflows &amp;&amp; overflowShown) || (alwaysShowScroll)
}</code></pre>
</div>
</div>

blocks|key|1132096|text|我使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1132097|function+windowHasScroll()
{
++++return+document.body.clientHeight+>+document.documentElement.clientHeight;
}|code-block|syntax|javascript|1132098|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I use
<pre><code>function windowHasScroll()
{
 return document.body.clientHeight &gt; document.documentElement.clientHeight;
}
</code></pre>

blocks|key|1132149|text|只需将文档根元素(即html元素)的宽度与窗口的内部部分进行比较：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1132150|if+((window.innerWidth+-+document.documentElement.clientWidth)+>0)+console.log('V-scrollbar+active')|code-block|syntax|javascript|1132151|如果您还需要知道滚动条的宽度：|1132152|vScrollbarWidth+=+window.innerWidth+-+document.documentElement.clientWidth;|1132153|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Simply compare the width of the documents root element (i.e. html element) against the inner portion of the window:

<pre><code>if ((window.innerWidth - document.documentElement.clientWidth) &gt;0) console.log('V-scrollbar active')
</code></pre>

If you also need to know the scrollbar width:

<pre><code>vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
</code></pre>

blocks|key|1131983|text|其他解决方案在我的一个项目中不起作用，我最终检查了overflow+css属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1131984|function+haveScrollbar()+{
++++var+style+=+window.getComputedStyle(document.body);
++++return+style["overflow-y"]+!=+"hidden";
}|code-block|syntax|javascript|1131985|但只有当滚动条通过改变道具而消失时，它才会起作用。如果内容等于或小于窗口，它就不会起作用。|1131986|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Other solutions didn't work in one of my projects and I've ending up checking overflow css property

<pre><code>function haveScrollbar() {
 var style = window.getComputedStyle(document.body);
 return style["overflow-y"] != "hidden";
}
</code></pre>

but it will only work if scrollbar appear disappear by changing the prop it will not work if the content is equal or smaller than the window.

blocks|key|1347462|text|我写了一个更新版本的Kees+C.+Bakker的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1347463|const+hasVerticalScroll+=+(node)+=>+{
++if+(!node)+{
++++if+(window.innerHeight)+{
++++++return+document.body.offsetHeight+>+window.innerHeight
++++}
++++return+(document.documentElement.scrollHeight+>+document.documentElement.offsetHeight)
++++++%7C%7C+(document.body.scrollHeight+>+document.body.offsetHeight)
++}
++return+node.scrollHeight+>+node.offsetHeight
}

if+(hasVerticalScroll(document.querySelector('body')))+{
++this.props.handleDisableDownScrollerButton()
}|code-block|syntax|javascript|1347464|该函数根据页面是否有垂直滚动条返回true或false。|1347465|例如：|1347466|const+hasVScroll+=+hasVerticalScroll(document.querySelector('body'))

if+(hasVScroll)+{
++console.log('HAS+SCROLL',+hasVScroll)
}|1347467|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I wrote an updated version of Kees C. Bakker's answer:

<pre><code>const hasVerticalScroll = (node) =&gt; {
 if (!node) {
 if (window.innerHeight) {
 return document.body.offsetHeight &gt; window.innerHeight
 }
 return (document.documentElement.scrollHeight &gt; document.documentElement.offsetHeight)
 || (document.body.scrollHeight &gt; document.body.offsetHeight)
 }
 return node.scrollHeight &gt; node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
 this.props.handleDisableDownScrollerButton()
}
</code></pre>

The function returns true or false depending whether the page has a vertical scrollbar or not.

For example:

<pre><code>const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
 console.log('HAS SCROLL', hasVScroll)
}
</code></pre>

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.

How can this be done?

Detect if a page has a vertical scrollbar?

我只想要一些简单的JQ/JS来检查当前页面/窗口(不是特定的元素)是否有垂直滚动条。Googling给我的东西对于这个基本的功能来说似乎过于复杂了。如何做到这一点？

问检测页面是否有垂直滚动条？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测页面是否有垂直滚动条？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测页面是否有垂直滚动条？
EN