Как заблокировать фон сайта при скролле: Как реализовать закрытие при клике на фон и заблокировать скролл? — Хабр Q&A

javascript — Блокировка скроллинга страницы при скроллинге дочернего DIV`a?

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

Пожалуйста, не предлагайте скрывать скролл-бар:

body { overflow: hidden; }

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

Для наглядности прикладываю скрин чата с сайта:

• javascript
• html
• jquery
• css
• scroll

Можно сделать и блок с контеном и чат fixed, как-то так:

/*
page-wrapper нужен, чтобы можно было позиционироваться абсолютно относительно page. 
*/

.page-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.  page {
  position: relative;
}
.article {
  height: 5000px;
}
.test {
  position: absolute;
  left: 10px;
  bottom: 0;
  width: 100px;
  height: 25px;
  background: green;
}
.chat {
  position: fixed;
  overflow: auto;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: red;
}
.chat-content {
  height: 5000px;
}

<div>
  <div>
    <div>article</div>
    <div>test</div>
  </div>
</div>
<div>
  <div>chat-content</div>
</div>

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

18

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

overscroll-behavior — CSS | MDN

CSS-свойство overscroll-behavior — это сокращение для свойств overscroll-behavior-x (en-US)

/* Значения-ключевые слова */
overscroll-behavior: auto; /* по умолчанию */
overscroll-behavior: contain;
overscroll-behavior: none;
/* Двойное значение */
overscroll-behavior: auto contain;
/* Глобальные значения */
overflow: inherit;
overflow: initial;
overflow: unset;

По умолчанию мобильные браузеры, как правило, обеспечивают эффект «отскока» или даже обновляют страницу при достижении её верхней или нижней части (или другой области прокрутки). Возможно, вы также замечали, что когда поверх страницы с прокруткой расположено диалоговое окно с прокруткой, то при достижении границы прокрутки диалогового окна нижележащая страница начинает прокручиваться. Это называется цепочкой прокрутки (scroll chaining, англ.)

В некоторых случаях такое поведение нежелательно. Вы можете использовать overscroll-behavior, чтобы избавиться от нежелательных цепочек прокрутки и поведения страниц браузера по принципу «потяните, чтобы обновить» (pull to refresh, англ.), характерного, например, для приложений Facebook и Twitter.

Свойство overscroll-behavior задаётся в виде одного или двух ключевых слов, выбранных из списка значений ниже.

Два ключевых слова определяют значение

Значения

auto

Поведение по умолчанию.

contain

Поведение для overscroll-behavior применяется внутри элемента, для которого установлено это значение (например, эффекты «отскока» или обновления), но не возникают цепочки прокрутки для соседних областей прокрутки, например, нижележащие элементы не будут прокручиваться.

none

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

Формальный синтаксис

overscroll-behavior = 
[ (en-US) contain | (en-US) none | (en-US) auto ] (en-US){1,2} (en-US)  

В нашем примере overscroll-поведения (см. также код по ссылке ) представлен полностраничный список поддельных контактов и диалоговое окно с чатом.

Обе эти области прокручиваются; обычно, если вы прокручиваете окно чата до тех пор, пока не достигнете границы прокрутки, нижележащее окно контактов тоже начнёт прокручиваться, что нежелательно.

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  overscroll-behavior: none;
}

 
    <дел>