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

 
Посетитель
small user social cms
Сообщений: 39
Доброе утро Ребятки! v

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

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

Долго копаясь в интернете нашел данный Java-скрипт:
Спойлер
Так вот всю страницу он то блокирует) уже проверял, а теперь пробую понять о чем он имел ввиду под:
Если хочется запретить прокрутку для конкретного элемента, то document.body меняем на document.getElementById.

Пробовал так:
Спойлер
Но как понял - что-то не то)
Будьте добры, ткните носом где затупил... facepalm
wSw.in.ua - Дружеское Сообщество
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
document.getElementById('id вашего блока')
Редактировалось: 1 раз (Последний: 5 декабря 2015 в 11:03)
Реклама
cms
Посетитель
small user social cms
Сообщений: 39
Спасибо за подсказку!

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

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

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

Вариант 1
Код PHP:
  1.  
  2. <script>
  3. function disableWheelScroll(){
  4. if (document.getElementsByClassName.addEventListener) document.getElementById('shoutbox').addEventListener('DOMMouseScroll', blockWheel, false);
  5. document.getElementsByClassName.onmousewheel = blockWheel;
  6. }
  7. function blockWheel(event){
  8. if (!event) event = window.event;
  9. if (event.stopPropagation) event.stopPropagation();
  10. else event.cancelBubble = true;
  11. if(event.preventDefault) event.preventDefault();
  12. else event.returnValue = false;
  13. }
  14. </script>
  15.  
Вариант 2
Код PHP:
  1.  
  2. <script>
  3. function disableWheelScroll(){
  4. if (document.getElementsByClassName.addEventListener) document.getElementsByClassName('scroll-wrap').addEventListener('DOMMouseScroll', blockWheel, false);
  5. document.getElementsByClassName.onmousewheel = blockWheel;
  6. }
  7. function blockWheel(event){
  8. if (!event) event = window.event;
  9. if (event.stopPropagation) event.stopPropagation();
  10. else event.cancelBubble = true;
  11. if(event.preventDefault) event.preventDefault();
  12. else event.returnValue = false;
  13. }
  14. </script>
  15.  
Блок самого Чата
Код PHP:
  1. <div class="scroll-wrap"><div class="scroll-pane"><div id="shoutbox"></div></div></div>
Редактировалось: 1 раз (Последний: 5 декабря 2015 в 12:04)
wSw.in.ua - Дружеское Сообщество
Посетитель
small user social cms
Медаль
Сообщений: 657
А overflow:hidden; не работает?
шаблоны и модули для instantCMS 1.10.6
Посетитель
small user social cms
Сообщений: 39
tokarev:

А overflow:hidden; не работает?
Благодарю за совет, попробовал. Немного не то, хотелось что бы полоса прокрутки оставалась, как и возможность ею воспользоваться. sad
wSw.in.ua - Дружеское Сообщество
Посетитель
small user social cms
Медаль
Сообщений: 657
div {overflow:hidden;}
div:hover {overflow-y:scroll;}

Скроллбар будет только при наведенном курсоре
Редактировалось: 1 раз (Последний: 5 декабря 2015 в 12:35)
шаблоны и модули для instantCMS 1.10.6
Посетитель
small user social cms
Сообщений: 39
tokarev:

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

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

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

Код PHP:
  1. <!doctype html>
  2. <html>
  3. <meta charset="utf-8">
  4. <body>
  5. <div id="div_1">
  6. <h1>Hello</h1>
  7. <h1>Hello</h1>
  8. <h1>Hello</h1>
  9. <h1>Hello</h1>
  10. <h1>Hello</h1>
  11. <h1>Hello</h1>
  12. <h1>Hello</h1>
  13. <h1>Hello</h1>
  14. <h1>Hello</h1>
  15. <h1>Hello</h1>
  16. <h1>Hello</h1>
  17. <h1>Hello</h1>
  18. <h1>Hello</h1>
  19. <h1>Hello</h1>
  20. <h1>Hello</h1>
  21. <h1>Hello</h1>
  22. <h1>Hello</h1>
  23. <h1>Hello</h1>
  24. <h1>Hello</h1>
  25. <h1>Hello</h1>
  26. </div>
  27. <script>
  28. (function() {
  29. document.getElementById('div_1').addEventListener('wheel', blockWheel);
  30. function blockWheel(event) {
  31. event.preventDefault();
  32. }
  33. })()
  34. </script>
  35. </body>
  36. </html>
http://plnkr.co/edit/ZxjArlCTCdgjC9Oi1A87?p=preview
Редактировалось: 2 раз (Последний: 5 декабря 2015 в 12:45)
wSw.in.ua - Дружеское Сообщество
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
AmDmKo:
Увы, почему-то, не получается заблокировать - скролл виджет-чата.
AmDmKo,
вам следует для начала разобраться с командами которыми оперируете и включить мозг.Если для ф-ции getElementById() требуется параметр,в данном случае индетификатор вашего блока, то для getElementsByClassName() тоже.А у вас не поймёшь.в одном месте есть, в другом нет.Будьте внимательней.
P.S. И что то в примере по этой ссылке http://plnkr.co/edit/ZxjArlCTCdgjC9Oi1A87?p=preview скроллинг не работает корректно.
Редактировалось: 1 раз (Последний: 5 декабря 2015 в 18:55)
Посетитель
small user social cms
Сообщений: 39
Lora:

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

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

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

http://plnkr.co/edit/ZxjArlCTCdgjC9Oi1A87?p=preview
Спойлер
Всем, спасибо!)
wSw.in.ua - Дружеское Сообщество
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: