Блог

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

HTML-коды

  <div class="navbar">
        <a href="" class="logo">
            <img src="" alt="" class="logo-img">
        </a>
        <nav class="nav-list">
            <a href="#home" class="nav-link home-btn">HOME</a>
            <a href="#about" class="nav-link about-btn">ABOUT</a>
            <a href="#portfolio" class="nav-link port-btn">PORTFOLIO</a>
        </nav>
    </div>

    <button class="page-btn left-btn">
        <i class="fa fa-arrow-left" aria-hidden="true"></i>
    </button>
    <button class="page-btn right-btn">
        <i class="fa fa-arrow-right" aria-hidden="true"></i>
    </button>

 
        <section class="section-1" id="home">
                <div class="section-title">
                    <h1 class="section-1-hd">
                        SECTION ONE
                    </h1>
                </div>
        </section>
        <section class="section-2" id="about">
                <div class="section-title">
                    <h1 class="section-2-hd">
                        SECTION TWO
                    </h1>
                </div>
        </section>
        <section class="section-3" id="portfolio">
                <div class="section-title">
                    <h1 class="section-3-hd">
                        SECTION THREE
                    </h1>
                </div>
        </section>
  

Коды Javascript

 var counter1 = 0;
var counter2 = 1;


const sections = document.querySelectorAll('section');

  if(counter1 === 3) {
    Array.from(sections).forEach(section =>{
      section.style.left = "0"
    })
    counter1=0;
    counter2=1;
   
}

  if(counter1 === -1) {
    Array.from(sections).forEach(section =>{
      if(section.classList[0] === 'section-3') {
        return;
      }
      section.style.left ='-100vw'
    })
    counter1=2;
    counter2=3;
   

  };

window.addEventListener('wheel' , (e) =>{
  const deltaY = e.deltaY > 0;

  if(deltaY) {
    counter1  ;
    counter2  ;
  }else {
    counter1--;
    counter2--;
  }

  console.log(counter1,counter2);

  document.querySelector(`.section-${deltaY ? counter1 : counter2}`).style.left = `${deltaY ? "-100vw" : "0"}`;
  });


  document.querySelector('.left-btn').addEventListener('click' , () => {
    counter1--;
    counter2--;
   document.querySelector(`.section-${counter2}`).style.left = '0';
  });

  document.querySelector('.right-btn').addEventListener('click' , () => {
    counter1  ;
    counter2  ;
    document.querySelector(`.section-${counter1}`).style.left = '-100vw';
  });


  

Возможно, я НАПИСАЛ ОЧЕНЬ ПЛОХОЙ КОД, И я ПРИНОШУ ИЗВИНЕНИЯ ПО ЭТОЙ ПРИЧИНЕ.

Сначала мы сохраняем все элементы раздела в массив

 const sections = document.querySelectorAll('section');
  

Затем создайте функцию, которая будет перемещаться или устанавливать текущую позицию прокрутки x на следующий или предыдущий раздел.

 let index = 0;
function navigate(direction) {
  if (direction === 'next') {
    index =   index % sections.length;
  }
  if (direction === 'prev') {
    index = (index > 0) ? --index : index;
  }

  window.scrollTo(sections[index].getBoundingClientRect().left, 0);
}
  

Эта функция увеличит текущий индекс раздела на 1 и умножит его на размер массива разделов или уменьшит на 1, если он больше 0.

После получения нового индекса раздела мы используем window.scrollTo(x, y) для перехода к целевому атрибуту sections left .

Теперь, когда мы закончили с javascript, давайте вернемся к HTML. Вместо того, чтобы использовать EventListener, его проще использовать onclick вот так

 <button class="page-btn left-btn" onclick="navigate('prev')">
  prev
  <i class="fa fa-arrow-left" aria-hidden="true"></i>
</button>
<button class="page-btn right-btn" onclick="navigate('next')">
  next
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</button>
  

В onclick мы передаем navigate функцию с ‘next’ или ‘prev’ в качестве аргумента

И вот оно!

РЕДАКТИРОВАТЬ: Для этой строки

 index = (index > 0) ? --index : index;
  

Это эквивалентно этому

 if (index > 0) {
    --index;
}
  

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

Включить jquery (действителен с 2020/14/09):

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  

Есть функция javascript, выполняющая прокрутку. Вот так, используя .animate(..) :

 /** Will center the scroll-bar of a container onto one of his child elements horizontally.
 * @param id_container: id string of the scrollable container.
 * @param id_target   : id string of the target that is to be centered to.
 *   Should be a child of above container.
 * @param additional_offset: Will be added to the movement computation (pixels).
 * @param scroll_time: Number. Time in ms that the transition should take. 200 is a good value. */
function scroll_to(id_container, id_target, additional_offset, scroll_time)
{
  //> Preliminaries. -------------------------------------------------
  if (additional_offset===undefined) { additional_offset=0; }
  if (scroll_time===undefined) { scroll_time=200; }
  var cont = $("#" id_container);
  var target = $("#" id_target);
  //< ----------------------------------------------------------------
  //> Actual strolling scrolling. ------------------------------------
  var site = target.position().left   additional_offset - cont.innerWidth()/2.0   cont.scrollLeft();
  cont.animate({ scrollLeft: site }, scroll_time);
  //< ----------------------------------------------------------------
}
  

Кстати.: Вся анимационная штука на самом деле просто немного сахара. Основное решение заключается в настройке свойства CSS в окружающем контейнере: scrollLeft . Смотрите, например, здесь:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft