Как сделать так чтобы блок можно было прокручивать только тогда когда я навожу туда стрелку мыши?

Question

[Дмитрий Ершов]

Вот я сделал такой скрипт который можно прокручивать центральный блок с помощью мыши
just-for-portfolio.gq/vk-structure.html
Но дело в том, что я хочу чтобы его можно было прокручивать только тогда, когда наводишь туда стрелку мыши, как например в диалогах вконтакте. Кто знает как это сделать?

Comments

[Kovalsky]

Этот макет был полностью скопирован со страницы диалогов vk.com и соответственно работает точно так же как страница диалогов на vk.com, диалоги вконтакте прокручиваются независимо от положения курсора, можете сами попробовать.

[Дмитрий Ершов]

Никита Полевой, Вот например если курсор мышки мы направим на левую меню где новости друзья и.тд или же на шапку и будем крутить scroll (колесо) мыши у нас же не будет прокручиваться блок с перепиской. А тут just-for-portfolio.gq/vk-structure.html прокручивается если даже у нас курсор наведено на шапку. Вот поэтому хочу узнать как это исправить?

[Kovalsky]

Дмитрий Ершов, захожу на страницу диалогов вконтакте, навожу курсор на левое меню, кручу колесико - переписка прокручивается. Навожу на шапку, кручу колесико - все равно прокручивается. В общем это не важно, я не знаю как сделать задуманное вами)

[Дмитрий Ершов]

Никита Полевой, Возникает другой вопрос а почему у меня не крутиться диалог)

[Дмитрий Ершов]

Никита Полевой, у тебя наверное диалог установлен на старый интерфейс а я имею на новом интерфейсе)

[Сергей]

У ВКонтакте родительский блок фиксированной высоты, дочерний - Xпикселов. Поэтому прокручивается только когда на него наводишь. То есть в Вашем случае надо body сделать высотой 100%, а дочерний блок сделать высотой как сейчас есть. Кстати почему не устраивает решение, которое писал в другом вопросе?

Повторюсь:

$(document).ready(function(){
         
  function disableScroll() {
    return false;
  }

  $('.scroll-fix-content').mouseover(function(){
      $(document).unbind('keydown DOMMouseScroll mousewheel', disableScroll);
  });
  $('.scroll-fix-content').mouseout(function(){
    $(document).bind('keydown DOMMouseScroll mousewheel', disableScroll);
  });
});

[Дмитрий Ершов]

Сергей, я того как ты ответил опубликовал извини)

[Дмитрий Ершов]

Сергей, то есть первый основной блок создаем фиксированный а внутри его уже блок который будет прокручиваться и к нему добавляю класс со скриптом jqery который ты дал ?

[Сергей]

Дмитрий Ершов, нет, достаточно одного варианта: либо применить скрипт, либо сделать BODY 100% высотой и засунуть в него блок

[Дмитрий Ершов]

Сергей, Хорошо спасибо большое выручил!

[Дмитрий Ершов]

Сергей, у меня тут вопрос возник а к боди нужно еще указать position: fixed; ото я 100 % высоты указал она как-то не работает

[Сергей]

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

[Kovalsky]

Сергей, с высотой блока там всё ок, это макет страницы диалогов вк. Не куча вложенных, а всего 3, всё это нужно для того чтоб обеспечить требуемый функционал.

[Дмитрий Ершов]

Сергей, скрипт который ты дал? А если да то в какой блок подставить этот класс .scroll-fix-content?

[Дмитрий Ершов]

Дмитрий Ершов, а все понял я просто недосмотрел

Answer 1

[vaskadogana]

а зачем скрипт?)
делаешь для блока

оoverflow-y: hidden; max-height: calc(100vh - (header+footer));

и вуаля.
И на него же вешаешь он скролл, если подгрузка контента динамическая или я не понял вопроса?

Comments

[vaskadogana]

ах да, для боди еще max-height: 100vh

[Дмитрий Ершов]

vaskadogana, я что-то не понял а для какого блока который будет прокручиваться?

[vaskadogana]

Дмитрий Ершов, да

[Дмитрий Ершов]

@vasko
Вот так:

body {
overflow-x: hidden;
max-height: 100vh
}
div.scroll {
overflow-y: hidden;
max-height: calc(100vh - (header+footer));
}

После чего когда мы на водим курсором на этот блок и будет крутить колесо мыши у нас она будет прокручиваться?

[vaskadogana]

Дмитрий Ершов, max-height: calc(100vh - (header+footer));
тут хедер и футер это переменные поставьте вместо них соответствующие данные.

[Дмитрий Ершов]

vaskadogana, под словом данные вы имеете классы которые мы давали блокам? или что-то другое

Answer 2

[Stalker_RED]

Без скриптов, родное поведение браузера
jsfiddle.net/tgts5Lny