Доброго времени суток.
Дано: имеется страница из двух блоков, расположенных один над другим.
Надо: написать код JS, который:
первое - при клике на верхний блок прокрутит страницу вниз, закрыв верхний блок и открыв нижний, а по клику на нижний блок прокрутит страницу вверх, закрыв нижний блок и открыв верхний;
второе - запретить посетителю страницы поднимать и опускать страницу скроллом ролика мыши или Drag’n’Drop. Вверх-вниз только через клик.
И если с первай частью задания я справился, то со второй проблемы. Попытка запретить скролл приводит к тому, что не срабатывают и клики.
Посоветуйте, пожалуйста, как решить проблему.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>TEST</title>
<style>
body{ display: flex; align-items: flex-start; justify-content: flex-start; margin: 0px; }
body::-webkit-scrollbar{ width: 0; }
.field { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
width: 100vw; height: 202vh; padding: 0px; }
#menu { width: 80%; height: 70%; background: blue; margin-top: 0%; }
#dial { width: 80%; height: 70%; background: red; margin-top: 1%; }
</style>
</head>
<body>
<div class = "field">
<div id = "menu"></div>
<div id = "dial"></div>
</div>
<script>
let menu = document.getElementById("menu");
menu.addEventListener("click", function({dial.scrollIntoView(false)});
let dial = document.getElementById("dial");
dial.addEventListener("click", function( ){menu.scrollIntoView()});
</script>
</body>
</html>