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|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|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|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>

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>

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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