Запретить скролл мышью в DIV

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

#1 5 декабря 2015 в 09:24

Доброе утро Ребятки!

Будьте добры, подскажите советом stuk

На главной странице сайта имеется виджет Чат. И вот при прокрутке сайта — попадая на виджет чат, начинаем долго листать скролом сам чат, а не сайт.
Посетила идея — убрать скролл мышкой в определенном DIV блоке — НО при этом оставить "правую полосу прокрутки".

Долго копаясь в интернете нашел данный Java-скрипт:

Спойлер

<html>
<head>
<script>
function disableWheelScroll(){
if (document.body.addEventListener) document.body.addEventListener('DOMMouseScroll', blockWheel, false);
document.body.onmousewheel = blockWheel;
}
function blockWheel(event){
if (!event) event = window.event;
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
}
</script>
</head>
<body>
… контент ...
<script>disableWheelScroll();</script>
</body>
</html>

Скрипт блокирует колесико мышки для всего документа.
Если хочется запретить прокрутку для конкретного элемента, то document.body меняем на document.getElementById.

Так вот всю страницу он то блокирует) уже проверял, а теперь пробую понять о чем он имел ввиду под:

Если хочется запретить прокрутку для конкретного элемента, то document.body меняем на document.getElementById.

Пробовал так:

Спойлер

<html>
<head>
<script>
function disableWheelScroll(){
if (document.getElementById.addEventListener) document.getElementById.addEventListener('МОЙ ДИВ БЛОК', blockWheel, false);
document.getElementById.onmousewheel = blockWheel;
}
function blockWheel(event){
if (!event) event = window.event;
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
}
</script>
</head>
<body>
… контент ...
<script>disableWheelScroll();</script>
</body>
</html>

Но как понял — что-то не то)
Будьте добры, ткните носом где затупил… facepalm

#2 5 декабря 2015 в 11:03

document.getElementById('id вашего блока')

#3 5 декабря 2015 в 11:56

Спасибо за подсказку!

Увы, почему-то, не получается заблокировать — скролл виджет-чата.

Немог бы кто знающий подсказать в чем просчет?)

быть может способ не тот, или есть другие варианты заблокировать скролл определенного див блока?) zst

Вариант 1

 
<script>
function disableWheelScroll(){
if (document.getElementsByClassName.addEventListener) document.getElementById('shoutbox').addEventListener('DOMMouseScroll', blockWheel, false);
document.getElementsByClassName.onmousewheel = blockWheel;
}
function blockWheel(event){
if (!event) event = window.event;
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
}
</script>

Вариант 2

 
	<script>
function disableWheelScroll(){
if (document.getElementsByClassName.addEventListener) document.getElementsByClassName('scroll-wrap').addEventListener('DOMMouseScroll', blockWheel, false);
document.getElementsByClassName.onmousewheel = blockWheel;
}
function blockWheel(event){
if (!event) event = window.event;
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
}
</script>

Блок самого Чата

<div class="scroll-wrap"><div class="scroll-pane"><div id="shoutbox"></div></div></div>

Сегодня в 18:35

#4 5 декабря 2015 в 12:25

А overflow:hidden; не работает?

шаблоны и модули для instantCMS 1.10.6

#5 5 декабря 2015 в 12:30

А overflow:hidden; не работает?

tokarev

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

#6 5 декабря 2015 в 12:33

div {overflow:hidden;}
div:hover {overflow-y:scroll;}

Скроллбар будет только при наведенном курсоре

шаблоны и модули для instantCMS 1.10.6

#7 5 декабря 2015 в 12:44

div {overflow:hidden;}
div:hover {overflow-y:scroll;}

Скроллбар будет только при наведенном курсоре

tokarev

Благодарю, погляжу и этот вариант.
А так уже подсказали подходящий вариант crazy

<!doctype html>
<html>
<meta charset="utf-8">
<body>
  <div id="div_1">
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
  </div>
  <script>
    (function() {
      document.getElementById('div_1').addEventListener('wheel', blockWheel);
      function blockWheel(event) {
        event.preventDefault();
      }
    })()
  </script>
</body>
</html>

plnkr.co/edit/ZxjArlCTCdgjC9Oi1A87?p=preview

#8 5 декабря 2015 в 12:48

Увы, почему-то, не получается заблокировать — скролл виджет-чата.
AmDmKo

AmDmKo,
вам следует для начала разобраться с командами которыми оперируете и включить мозг.Если для ф-ции getElementById() требуется параметр, в данном случае индетификатор вашего блока, то для getElementsByClassName() тоже.А у вас не поймёшь.в одном месте есть, в другом нет.Будьте внимательней.
P.S. И что то в примере по этой ссылке plnkr.co/edit/ZxjArlCTCdgjC9Oi1A87?p=preview скроллинг не работает корректно.

#9 5 декабря 2015 в 19:01

Увы, почему-то, не получается заблокировать — скролл виджет-чата.
AmDmKo
AmDmKo,
вам следует для начала разобраться с командами которыми оперируете и включить мозг.Если для ф-ции getElementById() требуется параметр, в данном случае индетификатор вашего блока, то для getElementsByClassName() тоже.А у вас не поймёшь.в одном месте есть, в другом нет.Будьте внимательней.
P.S. И что то в примере по этой ссылке plnkr.co/edit/ZxjArlCTCdgjC9Oi1A87?p=preview скроллинг не работает корректно.

Lora

Спасибо за ответ stuk

В тех двух примерах я экспериментировал с ID и Clases.

А так по сути — вот рабочий и меня устраивающий вариант.

plnkr.co/edit/ZxjArlCTCdgjC9Oi1A87?p=preview

Спойлер

<!doctype html>
<html>
<meta charset="utf-8">
<style>
  #div_1 {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    overflow: scroll;
  }
</style>
 
<body>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <div id="div_1">
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
  </div>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <h1>Hello</h1>
  <script>
    (function() {
      document.body.addEventListener('wheel', contScroll);
      document.getElementById('div_1').addEventListener('wheel', blockWheel);
 
      function blockWheel(event) {
        event.preventDefault();
      }
 
      function contScroll(event) {
        if (event.wheelDelta === -120) {
          this.scrollTop += 53;
        } else {
          this.scrollTop -= 53;
        }
      }
    })()
  </script>
</body>
 
</html>

Всем, спасибо!)

Помогите!

ошибка в 3 колоночном шаблоне

Запретить скролл мышью в DIV

Похожие темы

Запретить подгрузку стилей из шаблона

Бесконечный скролл новостей

.../admin/controllers/edit/activityrms/activity

[ЗАКРЫТО] Как убрать бегунок у скрола ?

Главное меню не скролится, когда "большое"

[ЕСТЬ РЕШЕНИЕ] Не работает скролл в slick-slider при условии tabindex="-1"

InstantCMS Team

О проекте

Поддержка

Дополнения