0

Есть 3 блока, высота и ширина у каждого на весь экран. При каждом скроле нужно переходить к якорю блока ниже. Я хочу сделать блочную прокрутку страницы и как я понял, сделать это путём обычного перемещения вниз на высоту экрана нельзя. Так что я решил делать это через якорь. Если я думаю не в том направлении, то поправьте пожалуйста. Библиотеки для поблочной прокрутки я не использую, т.к они мешают некоторым функциям.

1 ответ 1

2

Вообще, настройка прокрутки - это удел 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
  • Ну, не мой вариант. У тебя тут получается что то типа "докрутки". Ты листаешь и только потом она докручивает до блока. Мне нужно было что бы вся прокрутка было фиксированно блочной. Что бы я мог остановиться на стыке 2х блоков.
    – DonTraffic
    Commented 4 янв. 2021 в 14:59
  • @DonTraffic Так это все регулируется из CSS. Добавил еще один пример. На нем следующий блок как бы идет внахлест предыдущего.
    – DiD
    Commented 4 янв. 2021 в 17:23

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.