Если я наведу указатель мыши на тег div, прокрутка сработает, однако я не смогу прокрутить содержимое, если наведу указатель мыши за пределы поля div. Можно ли указывать конкретный div, куда бы ни направлялся указатель мыши?

<div style="max-height: 100px;overflow-y: scroll;">
  TEST<br><br><br><br><br><br><br><br><br><br>
</div>
2
Ninja Warrior 11 21 Авг 2018 в 09:27

3 ответа

Лучший ответ

Вы можете сделать что-то подобное.

const target = document.getElementById("target");

document.addEventListener("wheel", function(e){
  // prevent the default scrolling event
  e.preventDefault();

  // scroll the div
  target.scrollBy(e.deltaX, e.deltaY);
})
#target{
  height: 100px;
  overflow-y: scroll;
}
<div id="target">
  TEST<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
2
Hikarunomemory 21 Авг 2018 в 06:58

Вы можете зарегистрировать событие самостоятельно. Таким образом, вы можете прокрутить div, который вы хотите за пределами div.

Это будет утомительно для вас, если на вашей странице есть несколько скроллеров.

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

document.getElementById("scroll").addEventListener("wheel", e=>e.preventDefault());
document.getElementById("main").addEventListener("wheel", e=>myFunction(e));

function myFunction(e) {
    document.getElementById("scroll").scrollTop += 0.2 * e.deltaY;
}
<div id="main" style="height:300px">
<div id="scroll" style="max-height: 100px;overflow-y: scroll;">
  TEST<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
1
MT-FreeHongKong 21 Авг 2018 в 06:59

Можно ли указывать конкретный div, куда бы ни направлялся указатель мыши?

Не совсем ... то, что вы, вероятно, хотите сделать вместо этого, это установить другие части страницы в position: fixed или position: sticky. Таким образом, содержимое основного тела будет прокручиваться, но некоторые части останутся на том же месте. Сам переполнение стека делает это с верхним заголовком и левой боковой панелью.

0
We Are All Monica 21 Авг 2018 в 06:31
51942791