时间戳

首页 > 解决方案 > 单击导航栏链接时水平滚动

javascript - 单击导航栏链接时水平滚动

问题描述

我刚开始编码，我在某个地方遇到了问题，我对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';
  });

我可能写了一个非常糟糕的代码，我为此道歉。

标签： javascripthtmlnavigationhorizontal-scrolling

解决方案

如果您愿意使用 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

推荐阅读