Javascript-форум - scrollIntoView() и scrollIntoView(false)

Доброго времени суток.

Дано: имеется страница из двух блоков, расположенных один над другим.
Надо: написать код 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>