Почему не убирается скролл?

Question

[Vova135798]

При нажатии на кнопку "send message" открывается модальное окно. При открытии скролл всей страницы должен убираться, но почему-то это не происходит. В чем проблема?

Answer 1

[Ankhena]

Потому что getElementsByTagName это коллекция, а не элемент.
Используйте querySelector.

Переменной больше подойдет название body, чем telo.

В самом скрипте выгоднее манипулировать классами, чем напрямую стилями. Проще помнить вам и проще разбираться другим.

span это не интерактивный элемент. Штуки с крестиками, закрывающие модалки называются кнопками <button>

Comments

[Vova135798]

Спасибо, все сработало. Но страница при открытии окна страница немного смещается вправо (заполняет место скролла). Можно это как-то поправить?

[Ankhena]

Vova135798, да, на js узнать ширину скролла и добавлять её куда-нибудь, типа в padding для body, как кастомное свойство.

[Vova135798]

Ankhena, А как узнать ширину скролла?

[Ankhena]

Vova135798, это очень легко гуглится

[Vova135798]

Ankhena, Я нашел как узнать ширину. Но не могу добавить ширину скролла к боди

body.style.marginRight = getScrollbarWidth() + "px";

что тут неправильно?

[Ankhena]

Vova135798, без понятия. Это getScrollbarWidth что?
Смотрите, что выдаете консоль для этого body.style.marginRight

[FrelFrloich]

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

Но если прям совсем неймётся

const srollWidth = "вычисляете ширину"
const body = document.querySelector('body')

body = body === srollWidth  ? '': srollWidth

ну и пихаете в клик по той же кнопке.

[Ankhena]

FrelFrloich, через кастомные свойства это делается присвоением всё того же класса, в котором overflow.

[FrelFrloich]

Ankhena, если задача стоит при нажатии на кнопку вызова модалки и скрытии скролбара, через какие кастомные? если в браузерах различная ширина скролбара, или я вас не правильно понял.
Всё вроде как ясно, вычислил и добавил, при отмене убрал.

[Ankhena]

FrelFrloich, да, вычислил, записал в кастомное, применил класс. Всё тот же класс, который накидывает overflow на body.
Закрыл модалку - снял класс с body.

.body-with-modal-opened {
  padding-right: var(--scroll-width);
  overflow: hidden;
}

[FrelFrloich]

Ankhena, Ну, а что тогда, и откуда такая категоричность, не все люди юзают css переменные.

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

[Ankhena]

FrelFrloich,
Категоричности там не было ни разу, автор вопроса может использовать любой из вариантов, а также их комбо или что-то ещё своё.

[Vova135798]

Ankhena, getScrollbarWidth это функция, которая находит ширину скролла
вот полный код:

var btn = document.getElementById("button_for_modal_window");
var modal = document.getElementById("modal_window");
var span = document.getElementsByClassName("close_modal_window")[0];
var body = document.querySelector("body");

btn.onclick = function () {
    modal.style.display = "block";
    body.style.overflow = "hidden";
    body.style.marginRight = getScrollbarWidth() + "px";
}

span.onclick = function () {
    modal.style.display = "none";
    body.style.overflow = "auto";
    
}

window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
        body.style.overflow = "auto";
    }
}

var getScrollbarWidth = function() {
    var div, width = getScrollbarWidth.width;
    if (width === undefined) {
      div = document.createElement('div');
      div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
      div = div.firstChild;
      document.body.appendChild(div);
      width = getScrollbarWidth.width = div.offsetWidth - div.clientWidth;
      document.body.removeChild(div);
    }
    return width;
  };

[Vova135798]

FrelFrloich, Это сработало, но как вернуть скролл и убрать margin?

[Ankhena]

Vova135798, так https://jsfiddle.net/zqr0x8b1/
Сейчас там вместо скролла будет белая полоса, можете адаптировать как вам хочется.

И на будущее: всегда показывайте код в песочнице. Лучше jsfiddle.net, потому что там не нужна регистрация, чтобы сохранять фидлы.