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

Question

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

Рейтинг: 1Ответов: 1Опубликовано: 29.04.2015

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

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

body { overflow: hidden; }

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

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

скриншот чата

css javascript html jquery прокрутка

Источник: Stack Overflow на русском

Answer 1

▲ 1

Можно сделать и блок с контеном и чат 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 class="page-wrapper">
  <div class="page">
    <div class="article">article</div>
    <div class="test">test</div>
  </div>
</div>
<div class="chat">
  <div class="chat-content">chat-content</div>
</div>

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

Ответы