Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2021, 15:08
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

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>
Ответить с цитированием
  #2 (permalink)  
Старый 08.09.2021, 07:43
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

Задача решена.
В <body> добавляем overflow:hidden;
В <script>:
заменяем {dial.scrollIntoView(false)} на {location.href="#dial"} (строка 29)
заменяем {menu.scrollIntoView()} на {location.href="#menu"} (строка 32).
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ScrollIntoView проктутка внутри элемента. Как убрать прокрутку основной области сайта CryNet Общие вопросы Javascript 2 30.09.2020 16:17
Нежадный ScrollIntoView Lerayne Общие вопросы Javascript 2 25.05.2011 03:59
проблемы с scrollIntoView m7TAPAKAH Opera, Safari и др. 1 16.06.2010 14:53