Horizontal scrolling and style change

March 29, 2023

Hi everyone I have a problem with javascript.
I would like to create a web page with horizontal scrolling and the moment I start scrolling I would like the vertical band to change becoming smaller. Horizontal scrolling works but I can’t apply the style. Thank you in advance for your help and tips

https://codepen.io/bastia-g5/pen/wvERPZM

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

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

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

// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 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";
  }
}

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%;
}

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

>Solution :

Given that your vertical band has the class .menubar, you can add a second CSS class that defines the small style:

.menubar--small {
  width: 50px;
}

You can then extend your event listener for "wheel" to change the style of your .menubar:

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

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

  // Updating the style of the vertical band
  if (scrollContainer.scrollLeft > 0) {
    menubar.classList.add("menubar--small");
  } else {
    menubar.classList.remove("menubar--small");
  }
});