水平网站上的 scrollTop 或 scrollLeft？

Question

我有一个我正在开发的网站（这是一个基本示例），昨天我得到了一些帮助来在单选按钮导航上实现活动状态，我现在正在尝试将其链接起来，以便它在页面滚动时也会发生变化/当当前查看时它只是onClick。我大致知道如何实现这一点，因为我之前做过类似的事情，但后来我想到，因为页面和滚动条被旋转以适应水平效果，我不知道它现在是 scrollTop 还是 scrollLeft。我以前从未使用过 scrollLeft，所以我不确定如何正确使用它。我想知道是否有人以前实现过类似的东西，正确的方法是什么？我已经尝试了两者，但似乎没有任何效果。这就是我大致想要实现的目标（但一次只有一个课程处于活动状态）。我想也许使用 Waypoints 可能是另一种选择，但同样很难在网上找到任何内容来解释当网站多次旋转时这是如何工作的。我的 JS 知识不稳定（仍在学习！），我只是想实现我认为可行的方法，所以这可能甚至不正确，任何理解我做错了什么的帮助将不胜感激！// --- change span classes on click const setIconState = (icon, state) => icon.className = state    ? icon.className.replace('button-off', 'button-on')    : icon.className.replace('button-on', 'button-off')const toggleIcon = element => {  const className = element.className;  element.className = className.indexOf('button-on') > -1    ? setIconState(element, false)    : setIconState(element, true);}const setIconActiveState = (icon, state) => icon.className = state  ? icon.className = `${icon.className} active`  : icon.className = icon.className.replace('active', '')document.querySelectorAll('.bottomnav span.icon')  .forEach(icon => {    icon.onclick = (e) => {      const {        target: clickedSpan      } = e;            const siblings = [...clickedSpan.parentElement.parentElement.querySelectorAll('span.icon')]        .filter(sibling => sibling != clickedSpan);      siblings.forEach(icon => {        setIconState(icon, false);        setIconActiveState(icon, false);      });      setIconState(clickedSpan, true);      setIconActiveState(clickedSpan, true);    };  });  // --- change span classes on scroll testfunction onScroll(event){    var scrollPos = $(document).scrollTop();    $('.bottomnav a').each(function () {        var currLink = $(this);        var refElement = $(currLink.attr("href"));        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {            currLink.addClass("active");        }        else{            currLink.removeClass("active");        }    });}

Answer 1

对于水平滚动，我会走以下路线，简化您的 HTML 和您收听的内容。由于触摸设备只需轻扫即可轻松滚动，您所需要做的就是让有滚轮的人可以访问它。您也可以添加动画，但这会使此代码段太长。

const main = document.querySelector( 'main' );

const nav = document.querySelector( 'nav' );

let scrollend;

function onwheel(){

  

  /* When using the scrollwheel, translate Y direction scrolls to X direction. This way scrollwheel users get the benefit of scrolling down to go right, while touch and other users get default behaviour. */

  

  event.preventDefault();

  event.stopImmediatePropagation();

  

  main.scrollLeft += event.wheelDeltaY;

  

}

function onscroll(){

  

  /* When scrolling, find the nearest element to the center of the screen. Then find the link in the nav that links to it and activate it while deactivating all others. */

  

  const current = Array.from( main.children ).find(child => {

  

      return child.offsetLeft >= main.scrollLeft - innerWidth / 2;

      

  });

  const link = Array.from( nav.children ).reduce((find, child) => {

    

    child.classList.remove( 'selected' );

    

    return find || (child.href.indexOf( current.id ) >= 0 ? child : find);

    

  }, false);

  

  if( link ) link.classList.add( 'selected' );

  

  clearTimeout( scrollend );

  scrollend = setTimeout( onscrollend, 100 );

  

}

function onscrollend(){

  

  /* After scrolling ends, snap the appropriate element. This could be done with an animation. */

  clearTimeout( scrollend );

  

  const current = Array.from( main.children ).find(child => {

  

      return child.offsetLeft >= main.scrollLeft - innerWidth / 2;

      

  });

  

  main.scrollLeft = current.offsetLeft;

  

}

/* Bind and initial call */

main.addEventListener( 'wheel', onwheel );

main.addEventListener( 'scroll', onscroll );

onscroll();

html,

body,

main {

    height: 100%;

}

body {

    padding: 0;

    margin: 0;

}

main {

    display: flex;

    overflow: auto;

    width: 100%;

    height: 100%;

    scroll-snap-type: x proximity;

}

main section {

    width: 100%;

    height: 100%;

    flex: 0 0 100%;

}

nav {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}

nav a {

    width: 1em;

    height: 1em;

    margin: 1em;

    display: block;

    overflow: hidden;

    color: transparent;

    border: 1px solid black;

    border-radius: 50%;

}

nav a.selected {

    background: black;

}

.bland { background: gray; }

.dark { background: darkgray; color: white; }

.bright { background: yellow; }

<nav>

  

  <a href="#section-1">Section 1</a>

  <a href="#section-2">Section 2</a>

  <a href="#section-3">Section 3</a>

  

</nav>

<main>

   

   <section class="bright" id="section-1">

      <h2>Section 1</h2>

   </section>

   

   <section class="dark" id="section-2">

      <h2>Section 2</h2>

   </section>

   

   <section class="bland" id="section-3">

      <h2>Section 3</h2>

   </section>

  

</main>