javascript - 水平网站上的 scrollTop 或 scrollLeft？

Question

我有一个我正在使用的网站(这里是一个基本的 example )，昨天我得到了一些帮助来在单选按钮导航上实现事件状态，我现在正在尝试将其链接起来以便它也会在页面滚动/查看时发生变化，因为目前它只是 onClick。

我大致知道如何实现这一点，因为我之前做过类似的事情，但后来我想到，因为页面和滚动条被旋转以适应水平效果，我不知道现在是否是 scrollTop或向左滚动。我以前从未使用过 scrollLeft，所以我不确定如何正确使用它。我想知道是否有人以前实现过类似的东西，正确的方法是什么？我都试过了，但似乎没有任何效果。 This是我大致想要实现的目标(但一次只有一个类(class)活跃)。

我想也许使用 Waypoints 可能是另一种选择，但同样很难在网上找到任何内容来解释当站点多次旋转时它是如何工作的。

我的 JS 知识很不稳定(仍在学习!)，我只是在尝试实现我认为可行的东西，所以这可能甚至不正确，如果能帮助理解我做错了什么，我们将不胜感激!

Heres the latest thing I've tried.

// --- 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 test

function 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) {
            $('.bottomnav a span').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    color: #000;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 100;
    font-size: 7px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.bottomnav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 2;
}

.bottomnav span {
    float: left;
    display: block;
    color: #888;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 26px;
}

.bottomnav span:hover {
    color: #fac123;
}

.bottomnav span.active {
    color: #fac123;
}

#container {
    overflow-y: scroll;
    overflow-x: hidden;
    transform: rotate(270deg) translateX(-100vh);
    transform-origin: top left;
    position: absolute;
    width: 100vh;
    height: 100vw;
    white-space: nowrap;
    scroll-snap-type: y mandatory;
}

#container .card {
    width: 100vw;
    height: 100vh;
    display: inline-flex;
    position: relative;
    scroll-snap-align: start;
}

#player {
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    font-size: 0;
    width: 100vh;
    height: 100vh;
    display: flex;
    /*        position: absolute;*/
}

#player section > object {
    width: 100vw;
    overflow-x: hidden;
}


section object > div {
    white-space: normal;
}

.container::-webkit-scrollbar {
    display: none;
}

section {
      padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    transition: .5s ease;
}

.cardwhite {
  color: white;
  background-color: black;
}

.cardblack {
  color: black;
  background-color: white;
}

h2 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'IBM Plex Serif', sans-serif;
}

p {
    font-size: 10px;
    margin-bottom: 15px;
    font-weight: 100;
    font-family: 'IBM Plex Sans', sans-serif;
}

  <link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet">

<div class="bottomnav" id="bottomnav">
            <a href="#1"><span class="icon ion-ios-radio-button-on active"></span></a>
            <a href="#2"><span class="icon ion-ios-radio-button-off"></span></a>
            <a href="#3"><span class="icon ion-ios-radio-button-off"></span></a>
        </div>

<div class="container" id="container">
        <div id="player">
       <section class="card cardwhite" id="1">
                <object>
                        <h2>Section 1</h2>
                        <p>Description</p>
                  
                </object>
            </section>

    <section class="card cardblack" id="2">
                <object>
                        <h2>Section 2</h2>
                        <p>Description</p>
                    
                </object>
            </section>

    <section class="card cardwhite" id="3">
                <object>
                        <h2>Section 3</h2>
                        <p>Description</p>
                 
                </object>
            </section>
</div>
</div>

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>