Как убрать скролл при клике на кнопку?

Вопрос-ответ JavaScript
1

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

2

Сделай демку в jsfiddle.net. Пока что я не вижу решения этой задачи в общем виде. Придется придумывать что-то конкретное под твою ситуацию, а ее детали будут понятны только с примером.

Тут будет интересно вернуть экран на то же количество проскроленного пространства. Еще сложнее будет если нужно вернуть к тому же проскроленному состоянию если порядок действий был такой:

  • проскроллить до x
  • открыть модальное окно
  • изменить размер окна браузера
  • закрыть модальное окно. Из-за изменения размера браузера состояние проскролленности страницы должно быть иным нежели после первого шага.

Если описанной выше ситуацией можно пренебречь, что задача не будет шибко сложной. (Ну зависит от самой разметки еще).

3

Если достаточно реализации без возвращения к тому же прокрученному моменту, на которой остановился пользователь до открытия окна, то может быть достаточно при открытии модального окна сделать overflow:hidden элементу у которого появляется скролл, и соответственно, убрать когда закрывается модальное окно.

4

http://jsfiddle.net/mo5cdtk3/16/ При клике на кнопку скролл имеет исчезать а при закрытии модального окна назад возвращаться

5

В примере нет поведения из описания поста: не вижу ни модального дива ни скролла.

6

хммм… У меня все работает

7

Давайте перефразирую и упрощу вопрос. Как сделать, чтобы при клике на кнопку №1 скролл исчезал, а при клике на кнопку №2 появлялся?

8

Добавить overflow:hidden, убрать overflow:hidden элементу со скроллом.

9

Как обратиться к этому элементу, через js? В моем случае это body.

10

document.body

12

Можете пожалуйста сбросить ссылку на готовое решение

13

Нет. Я могу только помочь разобраться с проблемой, но не решить ее.

14

Можно попросить google об этом.

15

Как обратиться к скроллу через js. Например у меня есть скролл в body, как мне к нему обратиться за js?

16

все просто. но не совсем…

17

Нет такого объекта, который бы был отражением скролла. Есть свойства у DOM узлов (и у body соответственно)

  • .scrollHeight - вся высота содержимого (read-only)
  • .scrollTop - на сколько содержимое проскроллено (read-write)
  • .clientHeight - видимая высота (read-only)

через эти свойства ты можешь узнать статус скролла. С помощью scrollTop еще можно установить на сколько проскроллен элемент.

А вот чтобы убрать скролл - нужно изменять css свойство, которое отвечает за “скроллируемость” элемента. Это свойство overflow. Я выше писал.

18 
$("body").scrollHeight(function(){
$(".body").css("overflow", "hidden");

});

Получается мне нужно написать такую функцию?

19

Вот эта часть бессмысленна.

Я говорю о конструкции типа:

function showPopup() {
	// .. логика отображения попапа
	document.body.style.overflow = 'hidden'
}

function hidePopup() {
	// .. логика скрытия попапа
	document.body.style.overflow = 'auto'	
}
1 лайк
20

Где document.body.style.overflow = 'hidden' - синоним $(".body").css("overflow", "hidden")

1 лайк
21

Теперь понял. Благодарю за помощь!