JavaScript: получить ширину окна минус ширина полосы прокрутки

хорошо, я думал, что это будет очень просто, но оказалось, что это не так. Я думаю, что я просто что-то испортил в своем HTML/CSS, но вот.

у меня есть базовая страница:

HTML-код

<!DOCTYPE html>
<html>
  <head>
    <link href='test2.css' rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="test2.js"></script>
  </head>
  <body>
    <div id="scroll"></div>
  </body>
</html>

условие_2.в CSS

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

#scroll {
  height: 100%;
  width: 100%;
  overflow: scroll;
  background-color: black;
}

условие_2.js

$(document).ready(function() {
  // my resolution is 1440x900
  alert('innerwidth should be 1425');
  // all of these return 1440
  alert('body innerwidth: ' + $('body').innerWidth());
  alert('document width: ' + $(document).width());
  alert('window width: ' + $(window).width());
  alert('scroll div innerwidth: ' + $('#scroll').innerWidth());
  alert('document.documentElement.clientWidth: ' + document.documentElement.clientWidth);
  alert('document.documentElement.scrollWidth: ' + document.documentElement.scrollWidth);
});

Итак, у меня есть один элемент на странице... div, который занимает весь экран, или, скорее, он должен занимать весь экран минус полосы прокрутки. Теперь, я тут шпионю, как захватить ширину и высоту страницы без полос прокрутки, но, к сожалению, ни один из них не возвращает правильное значение... что заставляет меня думать, что я пропустил лодку в моем HTML или CSS.

jquery-как получить ширину экрана без полосы прокрутки?

как получить размер окна браузера без прокрутки Барс

Итак, мне нужен метод для возврата значения моего видимого экрана минус соответствующее значение полосы прокрутки... поэтому для моей ширины мое значение должно быть 1425, потому что полоса прокрутки имеет ширину 15 пикселей. Я думал, что работа, расстояние между было, но, видимо, я ошибаюсь?

может ли кто-нибудь дать какое-либо представление? (Я запускаю Firefox 24.)

редактировать

В общем, я получил пустую страницу. Я буду добавлять элементы один за другим на эту страницу, и мне нужно использовать ширину страницы при расчете размеров для этих элементов. В конце концов, эта страница будет расти и расти, пока не появится полоса прокрутки, поэтому я пытаюсь заставить полосу прокрутки с самого начала, но, по-видимому, это ничего не делает.

EDIT2

вот что еще интереснее... если я это сделаю document.getElementById('scroll').clientWidth, Я получаю надлежащую внутреннюю ширину, но если я это сделаю $('#scroll').width() или $('#scroll').innerWidth(), они оба возвращают максимальное разрешение... похоже на ошибку jQuery.

8
css html javascript scrollbar width

4 ответов

Я получил это где-то и дал бы кредит, если бы знал, где, но это было успешным для меня. Я добавил результат в качестве заполнения при установке переполнения html в hidden.

проблема в том, что полоса прокрутки является функцией браузера, а не веб-страницы. Измерение должно производиться динамически. Измерение с полосой прокрутки и измерение без полосы прокрутки позволит рассчитать разницу в ширине.

нашел источник: http://www.fleegix.org/articles/2006/05/30/getting-the-scrollbar-width-in-pixels

scrollCompensate = function () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild(inner);

    document.body.appendChild(outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild(outer);

    return (w1 - w2);
}

var htmlpadding = scrollCompensate();
3

обнаружил очень хакерское решение... добавив это перед моими предупреждениями в условие_2.js, я получаю правильную ширину:

var p = $('body').append('<p style="height: 100%; width: 100%;"></p>');
alert(p.width());
$('body').remove('p');

и, следовательно, все оповещения теперь имеют правильную ширину. Мне даже не нужно overflow-y в CSS, если я сделаю это таким образом. Любопытно, почему это решает его...

реальный ответ должен содержать HTML и CSS как есть, а затем использовать document.getElementById('scroll').clientWidth. Использование clientWidth получает видимую область минус ширина полосы прокрутки.

2

правильный ответ в этом посте отмечен как принятый: CSS медиа-запросы и ширина окна JavaScript не соответствуют

Это правильный код:

function viewport() {
  var e = window, a = 'inner';
  if (!('innerWidth' in window )) {
    a = 'client';
    e = document.documentElement || document.body;
  }
  return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
2

правильная ширина страницы задается $(document).width(). Ваша проблема в том, что вы используете свиток внутри div (переполнение: свиток). Используя $(document).width() возвращаемое значение уже дисконтирует видимую ширину свиток, но как вы ставите свиток внутри div возвращаемое значение-это не то же самое. Как ширина свиток не стандартно и меняет от системы к системе и браузера, это трудно решить.

Я предлагаю вам удалить свиток на div и пусть браузер управляет этим по умолчанию в тело, то да у вас есть правильная ширина.

1