横向滚动时垂直栏样式修改失效问题求助

制作支持横向滚动的网页，要求开始横向滚动时页面中的垂直导航栏（navbar）缩小。目前横向滚动功能已实现，但导航栏的样式修改无法生效。

原代码监听的是window的scroll事件，且判断逻辑依赖document.body.scrollTop或document.documentElement.scrollTop（纵向滚动距离），但实际横向滚动的是<main>元素，页面纵向滚动距离始终为0，因此触发不了样式修改逻辑。

1. 监听<main>元素的scroll事件，而非window的滚动事件
2. 判断条件改为基于<main>元素的scrollLeft（横向滚动距离），而非纵向的scrollTop
3. 调整阈值，根据需求设置触发样式变化的横向滚动距离

HTML #

<main>
   <section class="menusection">
     <div id="navbar" class="menubar">
            <p id="logo">Ciao ciao</p>
    </div>
  </section>
  <section>
    <div id="object1">
        <div class="title" onmouseover="hoverImage(event)" onmouseout="hoverImage(event)">
          <h1>Beep</h1>
        </div>
    </div>
    <div class="hover_img" id="hover_img">
        <img src="https://picsum.photos/200/300">
    </div>
  </section>
  <section>
    <h1>Boop</h1>
  </section>
  <section>
    <h1>Boooom</h1>
  </section>
    <section>
    <h1>The End</h1>
  </section>
</main>

CSS #

html,
body {
  margin: 0;
  font-family: sans-serif;
}

main {
  overflow-x: hidden;
  display: flex;
}

h1 {
  margin: 0;
  padding: 0;
  transform: rotate(270deg);
  transform-origin: 15% 38%;
}

p {
  font-size:20px;
}

section {
  min-width: 75vw;
  min-height: 100vh;
  display: flex;
  justify-content: left;
  align-items: end;
  font-size: 15ch;
}

section:nth-child(even) {
  background-color: teal;
  color: white;
}

.menusection {
  min-width: 12vw;
  min-height: 100vh;
  display: flex;
  justify-content: left;
  align-items: end;
  font-size: 15ch;
  z-index: 10;
}

.hover_img {
  position:relative;
  height: 100%;
  width:100%;
  z-index: 99;
}

.hover_img img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display:none;
}

.menubar {
  width: 307px;
  background-color:#123456;
  position:fixed;
  height: 100%;
  transition: padding 0.3s, font-size 0.3s; /* 添加过渡动画让变化更平滑 */
}

JavaScript #

const scrollContainer = document.querySelector("main");

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});

function hoverImage(event) {
  const x = document.querySelectorAll("#hover_img>img");
  const sDisplay = (event.type === "mouseout") ? "none" : "block";
  x[0].style.display = sDisplay;
}

// 监听main元素的横向滚动事件
scrollContainer.addEventListener('scroll', scrollFunction);

function scrollFunction() {
  // 当横向滚动距离超过80px时修改导航栏样式
  if (scrollContainer.scrollLeft > 80) {
    document.getElementById("navbar").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.getElementById("navbar").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}

• 保留CSS中的transition属性，让导航栏缩放效果更平滑
• 可根据实际需求调整触发样式变化的scrollLeft阈值
• 建议将内联事件绑定（如onmouseover）改为addEventListener方式，提升代码可维护性

内容的提问来源于stack exchange，提问作者bastiag5