Я недавно работал над созданием онлайн-портфолио, и у меня возникла последняя проблема перед публикацией первой версии. Когда я начал этот портфель, я пытался настроить горизонтальную прокрутку, поэтому я использовал этот ресурс в качестве руководства:
https://redstapler.co/pure-css-horizontal-scrolling-website-tutorial/
Было рекомендовано, чтобы у меня было два внешних слоя, обакоторые вращаются, переводятся и меняются местами, так что у меня может быть горизонтальная прокрутка, где я, когда я использую мышь и прокручиваю вверх и вниз, дисплей с прокруткой влево и вправо.
Я думал, что это было удивительное решение. Однако теперь, когда я хочу создать панель навигации, где я могу нажимать ссылки, и эти ссылки автоматически прокручивают их соответствующие разделы / разделы, у меня возникли некоторые проблемы. Я думаю, что это как-то связано со всеми поворотами, которые я сделал на внешних «обертках».
Короче, мне нужна помощь в изучении того, как реализовать функцию, в которой, если я нажму на ссылку на панели навигациипрокрутите влево в этот раздел.
Я пробовал кучу онлайн-уроков по этой функции, но у большинства есть типичная вертикальная веб-страница. Другие учебники, которые фокусируются на горизонтальной веб-странице, работают с html, который не совсем структурирован, как у меня, и поэтому просто не работает.
Вот мой HTML-код соответствующих разделов:
<body>
<div class="nav" id="navbar">
<nav class="navbar navbar-inverse " data-spy="affix" data-offset-top="197">
<a href="#home" class="home" id="link-one">Home</a>
<a href="#aboutme" class="aboutme" id="link-two">About Me</a>
<a href="#research" class="research" id="link-three">Research & Design</a>
<a href="#full" class="full" id="link-four">Full-Stack Projects</a>
<a href="#skills" class="skills" id="link-five">Skills</a>
</nav>
<!-- <a href="#contact" class="contact">Contact</a> -->
</div>
<div class="outside-wrapper">
<div class="scrolling-wrapper" id="scrolling-wrapper">
<div class="box one" id="one"> </div>
<div class="box two" id="two"><h2 class="box-text">Box</h2>
</div>
<div class="box three" id="three">
<div>
<div class="box four" id="four"><h2 class="box-text">Box</h2>
</div>
<!-- One Div - Fifth Viewport -->
<div class="box five" id="five"><h2 class="box-text">Box</h2>
</div>
</div>
</div>
</body>
Вот CSS, который демонстрирует, как я достиг горизонтальной прокрутки.
.scrolling-wrapper {
display: flex;
flex-direction: row;
width: 500vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
position: absolute;
background-image: url(public/hongkongme.jpg);
}
.outside-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
.box {
position: relative;
width: 100vw;
height: 100vh;
/* border: 2px solid black; */
}
Ничего не имеетработал до сих пор.