Я делаю веб-сайт с горизонтальной прокруткой, состоящий из множества div под "слайдом" className. Я хочу добавить на панель навигации кнопки для перехода к отдельным слайдам. Как мне это сделать?

Это код, который я использую для своего веб-сайта с горизонтальной прокруткой, он прокручивается с помощью прокрутки мыши:

//homePage.js
<div className='home'>
  <div className='slidesWrapper'>
    <div className='slide one'></div>
    <div className='slide two'></div>
    <div className='slide three'></div>
    <div className='slide four'></div>
  </div>
</div>

//homePage.css
.home {
  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;
}

.slides {
  display: flex;
  flex-direction: row;
  width: calc(sum of all slide widths);

  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

.slide {
  position: relative;
  height: 100vh;
  //slides are of varying width declared by the second classNames (one, two, three, etc.)

  display: flex;
}

.one {
 width: 100vw;
}

.two {
  width: 50vw;
}
0
ZKJ 30 Авг 2020 в 22:07

2 ответа

Лучший ответ

Самый простой способ сделать это без излишеств - использовать простой элемент привязки для ссылки на элемент на той же странице.

Из примера «Ссылка на элемент на той же странице» в Документы MDN:

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">
  Jump to the heading below
</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>
2
goldins 30 Авг 2020 в 19:23

Вы можете использовать JQuery для прокрутки до определенной цели. Вот пример

$(function(){

   var trigger = $('.trigger'); // your trigger for click event
   var section = $('.div'); // your class goes here to scroll to

   trigger.click(function(event){
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $(section).offset().top
        }, 1500);
    });
});
0
idlab 30 Авг 2020 в 19:31