Проверить наличие полос прокрутки в Javascript?

Question

Я создаю небольшое приложение для заметок, и иногда это происходит:

(потому что первое слово шире, чем ширина заметки.)

Есть ли способ проверить наличие полосы прокрутки в Javascript? Если я могу это сделать, я могу изменить размер заметки, пока она не будет содержать текст без полосы прокрутки.

Answer 1

Это свойство CSS3 будет разбивать слово внутри, если оно слишком велико для его контейнера:

#selector {  
    word-wrap: break-word;  
}

word-wrap: normal; для переключения стиля

Это работает практически в любом браузере и верьте этомуили нет, поддержка свойства восходит к IE5.Это заслуга Луи Лазариса за его пост Word-Wrap: свойство CSS3, работающее в любом браузере .

Answer 2

Для лучшей кросс-браузерной поддержки я бы порекомендовал подход с переносом слов плюс предоставление элементу заданной ширины (100% или некоторой ширины пикселя), чтобы он не расширялся. Это должно обеспечить лучшее решение.

Вы также можете установить overflow-x: hidden; просто скрыть полосу прокрутки, но она не работает в IE7 / 8 и также приведет к тому, что переполненный текст не будет отображаться вместо переноса, что, вероятно, не то, что вам нужно.

Answer 3

Вот способ выполнить то, о чем просил OP, расширить div, если у него есть полоса прокрутки, пока его больше нет:

var autoWiden = function ( elem ) {
    var checkForScroll = function() {
            var tsl;

            elem.scrollLeft += 10; // try to scroll
            tsl = elem.scrollLeft; // will be 0 if no scroll bar
            elem.scrollLeft = 0;   // reset scroll

            return tsl;
        };

    while (checkForScroll() > 0) {
        elem.style.width = (elem.offsetWidth + 10) + 'px';
    }
};

См. Пример →

Answer 4

Что я сделал в аналогичных обстоятельствах, так это добавил текст во временный элемент со скрытой видимостью, измерил его, и, если он слишком большой, сделал что-то для его решения (что могло бы включать в себя ручную перенос текста, вставку БР или просто расширение последний элемент, в который вы в конечном итоге помещаете текст). Это дает намного больше контроля, чем использование переноса слов: break-word;