Я просто хочу, чтобы некоторые простые JQ/JS проверяли, имеет ли текущая страница/окно (а не конкретный элемент) вертикальную полосу прокрутки.
Googling дает мне вещи, которые кажутся слишком сложными для этой основной функции.
Как это можно сделать?
$(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:<");
}
});
попробуйте следующее:
var hasVScroll = document.body.scrollHeight > document.body.clientHeight;
Это только скажет вам, если вертикальный scrollHeight больше высоты отображаемого контента. Переменная hasVScroll будет содержать true или false.
Если вам нужно выполнить более тщательную проверку, добавьте следующее в код выше:
// 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 && cStyle.overflow == "auto")
|| (hasVScroll && cStyle.overflowY == "auto");
Я пробовал предыдущий ответ и, похоже, не работал с $( "body" ). height() не обязательно представляет всю высоту html.
Я исправил решение следующим образом:
// 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:<");
}
Верните этот вопрос из мертвых;) Существует причина, по которой Google не дает вам простого решения. Особые случаи и причуды браузера влияют на вычисления, и это не так тривиально, как кажется.
К сожалению, есть проблемы с решениями, изложенными здесь до сих пор. Я вовсе не хочу унижать их - они являются отличными отправными точками и касаются всех ключевых свойств, необходимых для более надежного подхода. Но я бы не рекомендовал копировать и вставлять код из любого другого ответа, потому что
$( document ).width() и .height(), становятся жертвами jQuery ошибка определения размера документа.window.innerWidth, если браузер поддерживает его, ваш код не сможет обнаружить полосы прокрутки в мобильных браузерах, где ширина полосы прокрутки в целом равна 0. Они просто отображаются временно как оверлей и не занять место в документе. Масштабирование на мобильных устройствах также становится проблемой таким образом (длинная история).html и body на значения, отличные от значений по умолчанию (что происходит тогда немного, см. это описание).Я потратил больше времени, чем мог бы себе представить, найдя решение, которое "просто работает" (кашель). Алгоритм, который я придумал, теперь является частью плагина, jQuery.isInView, который предоставляет a .hasScrollbar метод. Посмотрите в источнике, если хотите.
В сценарии, когда вы полностью контролируете страницу и не имеете дело с неизвестным CSS, использование плагина может быть чрезмерным - в конце концов, вы знаете, какие крайние случаи применяются, а какие нет. Однако, если вам нужны надежные результаты в неизвестной среде, я не думаю, что описанных здесь решений будет достаточно. Вам лучше использовать хорошо протестированный плагин-шахту или любой другой.
Это работает для меня:
function hasVerticalScroll(node){
if(node == undefined){
if(window.innerHeight){
return document.body.offsetHeight> window.innerHeight;
}
else {
return document.documentElement.scrollHeight >
document.documentElement.offsetHeight ||
document.body.scrollHeight>document.body.offsetHeight;
}
}
else {
return node.scrollHeight> node.offsetHeight;
}
}
Для тела просто используйте hasVerticalScroll().
var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
Как ни странно, ни одно из этих решений не говорит вам, есть ли страница с вертикальной полосой прокрутки.
window.innerWidth - document.body.clientWidth даст вам ширину полосы прокрутки. Это должно работать во всех IE9 + (не тестировалось в меньших браузерах). (Или строго ответить на вопрос, !!(window.innerWidth - document.body.clientWidth)
Почему? Скажем, у вас есть страница, где содержание выше высоты окна, и пользователь может прокручивать вверх/вниз. Если вы используете Chrome на Mac без подключения мыши, пользователь не увидит полосу прокрутки. Подключите мышь и появится полоса прокрутки. (Обратите внимание, что это поведение можно переопределить, но это AFAIK по умолчанию).
Я нашел решение Ванилы
var hasScrollbar = function() {
// The Modern solution
if (typeof window.innerWidth === 'number')
return window.innerWidth > 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 > rootElem.clientHeight
var overflowShown = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'
return (contentOverflows && overflowShown) || (alwaysShowScroll)
} <script>
var scrollHeight = document.body.scrollHeight;
var clientHeight = document.documentElement.clientHeight;
var hasVerticalScrollbar = scrollHeight > clientHeight;
alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
</script>
Это скажет вам, есть ли полоса прокрутки или нет. Я включил некоторую информацию, которая может помочь в отладке, которая будет отображаться как предупреждение JavaScript.
Поместите это в тег script после закрытия тега body.
Я написал обновленную версию ответа Kees C. Bakker:
const hasVerticalScroll = (node) => {
if (!node) {
if (window.innerHeight) {
return document.body.offsetHeight > window.innerHeight
}
return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
|| (document.body.scrollHeight > document.body.offsetHeight)
}
return node.scrollHeight > node.offsetHeight
}
if (hasVerticalScroll(document.querySelector('body'))) {
this.props.handleDisableDownScrollerButton()
}
Функция возвращает true или false в зависимости от того, имеет ли страница вертикальную полосу прокрутки или нет.
Например:
const hasVScroll = hasVerticalScroll(document.querySelector('body'))
if (hasVScroll) {
console.log('HAS SCROLL', hasVScroll)
}
Другие решения не работали в одном из моих проектов, и я заканчиваю проверку переполнения свойства css
function haveScrollbar() {
var style = window.getComputedStyle(document.body);
return style["overflow-y"] != "hidden";
}
но он будет работать только в том случае, если полоса прокрутки исчезнет, изменив опору, она не будет работать, если содержимое будет равно или меньше, чем окно.
я использую
public windowHasScroll()
{
return document.body.clientHeight > document.documentElement.clientHeight;
}
Просто сравните ширину корневого элемента документов (т.е. элемента html) с внутренней частью окна:
if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')
Если вам также нужно знать ширину полосы прокрутки:
vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;