Мобильная версия< ul>
[*]Слева: основная панель навигации
[*]Вкл. справа — окно содержимого с идентификаторами разделов, привязанными к панели навигации.
Что работает. Поле содержимого выходит за пределы родительского контейнера по желанию, и я могу плавно прокручивать содержимое с помощью колеса прокрутки, если курсор находится над полем содержимого. При включенной плавной прокрутке я могу нажимать на идентификаторы на панели навигации и плавно переходить к соответствующим разделам.
Моя проблема: мне нужен >окно содержимого для прокрутки при перемещении колеса прокрутки, независимо от того, где находится курсор на веб-странице – например. на панели навигации, на полях — в отличие от прокрутки, только если курсор находится в поле содержимого. После включения я хочу сохранить плавную прокрутку для щелчков по панели навигации и прокрутки колеса прокрутки.
Я надеюсь, что кто-нибудь поможет мне разобраться с этим, поскольку, к сожалению, у меня нет идей! Такое ощущение, что здесь может быть простое решение, которого я пока не вижу. : )
Что я пробовал:
Я пытался добавить прослушиватели событий в элемент поля содержимого, чтобы 1) предотвратить прокрутка по умолчанию и 2) принудительно прокручивать поле содержимого независимо от того, где находится курсор. Хотя это позволяет мне прокручивать поле содержимого с помощью курсора за пределами поля содержимого по желанию и обеспечивает плавную прокрутку для щелчков панели навигации, я теряю плавную прокрутку при прокрутке колеса прокрутки, что нежелательно.
Я ожидал, что смогу прокручивать окно содержимого откуда угодно и поддерживать плавную прокрутку как для щелчков по панели навигации, так и для прокрутки колеса прокрутки.
Я включил ошибочный скрипт ниже, чтобы вы могли понять, что я имею в виду. Я попытался принудительно перенести события колеса в раздел прокрутки. Это успешно заставляет раздел прокрутки прокручиваться, когда курсор находится не в разделе прокрутки (например, на панели навигации), но прокрутки очень разрозненные и неплавные, что приводит к очень плохому пользовательскому интерфейсу.
Код: Выделить всё
let mainContent = document.querySelector('.scrollSection');
function preventDefaultScroll(event) {
event.preventDefault();
}
function enableFlexScroll(event) {
mainContent.scrollTop += event.deltaY;
}
document.addEventListener('wheel', preventDefaultScroll, {
passive: false
});
document.addEventListener('wheel', enableFlexScroll, {
passive: false
});Код: Выделить всё
/* Flex container */
body {
display: flex;
height: 100vh;
margin: 0 10%;
overflow: hidden;
}
/* LHS Navigation */
.staticSection {
width: 25%;
background-color: antiquewhite;
}
/* RHS Scrolling Content */
.scrollSection {
width: 75%;
overflow-y: auto;
scroll-behavior: smooth;
}
#about,
#experience,
#projects {
height: 500px;
background-color: darkgray;
}Код: Выделить всё
[list]
[*][url=#about]ABOUT[/url]
[*][url=#experience]EXPERIENCE[/url]
[*][url=#projects]PROJECTS[/url]
[/list]
About
Experience
Projects
Подробнее здесь: https://stackoverflow.com/questions/787 ... where-on-m
