Есть 3 блока, высота и ширина у каждого на весь экран. При каждом скроле нужно переходить к якорю блока ниже. Я хочу сделать блочную прокрутку страницы и как я понял, сделать это путём обычного перемещения вниз на высоту экрана нельзя. Так что я решил делать это через якорь. Если я думаю не в том направлении, то поправьте пожалуйста. Библиотеки для поблочной прокрутки я не использую, т.к они мешают некоторым функциям.
1 ответ
Вообще, настройка прокрутки - это удел CSS. JS там лишний. Попробуйте два примера.
:root, body {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: column nowrap;
font-family: monospace;
margin:0;
}
.container {
display: flex;
overflow: auto;
outline: 1px dashed lightgray;
flex: none;
width: 100vw;
height: 100vh;
flex-flow: column nowrap;
}
/* definite scroll snap */
.mandatory-scroll-snapping > div {
scroll-snap-stop: always;
}
.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
line-height: 256px;
font-size: 128px;
width: 100vw;
height: 100vh;
}
/* appearance fixes */
.container > div:first-child {
line-height: 1.3;
font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
background-color: #87EA87;
}
.container > div:nth-child(odd) {
background-color: #87CCEA;
}
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>Жёсткая прокрутка по высоте блока</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
:root, body {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: column nowrap;
font-family: monospace;
margin:0;
}
.container {
display: flex;
overflow: auto;
outline: 1px dashed lightgray;
flex: none;
width: 100vw;
height: 100vh;
flex-flow: column nowrap;
}
.proximity-scroll-snapping > div {
scroll-snap-stop: normal;
}
.proximity-scroll-snapping {
scroll-snap-type: y proximity;
}
.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
line-height: 256px;
font-size: 128px;
width: 100vw;
height: 100vh;
}
/* appearance fixes */
.container > div:first-child {
line-height: 1.3;
font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
background-color: #87EA87;
}
.container > div:nth-child(odd) {
background-color: #87CCEA;
}
<div class="container y proximity-scroll-snapping" dir="ltr">
<div>Неточная прокрутка по высоте блоков</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Ну а к якорю переместиться легко:
document.querySelectorAll('a[href]').forEach((a)=>{
a.onclick=(e)=>{
e.preventDefault();
document.documentElement.scrollTop =
document.body.scrollTop =
document.querySelector(a.hash).offsetTop;
};
});
html,body{
margin:0;
scroll-behavior: smooth;
}
.float {
position:fixed;
left:0;
top:0;
}
.container > div {
width: 100vw;
height: 100vh;
text-align: center;
flex: none;
font-size: 128px;
padding:0;
}
.container > div > a {
display: block;
margin: 0;
line-height: 1rem;
}
/* coloration */
.container > div:nth-child(even) {
background-color: #87EA87;
}
.container > div:nth-child(odd) {
background-color: #87CCEA;
}
<div class="container">
<div>
<a id="slide1"></a>
1
</div>
<div>
<a id="slide2"></a>
2
</div>
<div>
<a id="slide3"></a>
3
</div>
<div>
<a id="slide4"></a>
4
</div>
<div>
<a id="slide5"></a>
5
</div>
</div>
<div class="float">
<p><a href="#slide1">slide1</a></p>
<p><a href="#slide2">slide2</a></p>
<p><a href="#slide3">slide3</a></p>
<p><a href="#slide4">slide4</a></p>
<p><a href="#slide5">slide5</a></p>
</div>
Добавил четвертый пример, на котором остаются видны стыки слайдов.
:root, body {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: column nowrap;
font-family: monospace;
margin:0;
}
.container {
display: flex;
overflow: auto;
outline: 1px dashed lightgray;
flex: none;
width: 100vw;
height: 100vh;
flex-flow: column nowrap;
}
.proximity-scroll-snapping > div {
scroll-snap-stop: normal;
}
.proximity-scroll-snapping {
scroll-snap-type: y proximity;
}
.container > div {
text-align: center;
scroll-snap-align: end;
scroll-margin-block: 20vh 20vh;
scroll-padding-block: 20vh 20vh;
flex: none;
line-height: 256px;
font-size: 128px;
width: 100vw;
height: 100vh;
}
/* appearance fixes */
.container > div:first-child {
line-height: 1.3;
font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
background-color: #87EA87;
}
.container > div:nth-child(odd) {
background-color: #87CCEA;
}
<div class="container y proximity-scroll-snapping" dir="ltr">
<div>Неточная прокрутка по высоте блоков</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
-
Ну, не мой вариант. У тебя тут получается что то типа "докрутки". Ты листаешь и только потом она докручивает до блока. Мне нужно было что бы вся прокрутка было фиксированно блочной. Что бы я мог остановиться на стыке 2х блоков. Commented 4 янв. 2021 в 14:59
-
@DonTraffic Так это все регулируется из CSS. Добавил еще один пример. На нем следующий блок как бы идет внахлест предыдущего.– DiDCommented 4 янв. 2021 в 17:23