When I make the window small the scroll bar sticks

Question

When you make your window smaller the the left sidebar gets in the way and the whole page just becomes a big mess. I am aiming for the left sidebar to scroll when overflown but I dont want it to stick when you scroll on the regular page.

I have tried everything I can think of to fix this problem but I cant seem to figure it out. I am new to most coding languages so that is probably why. I am expecting for the left scroll bar not to stick when I scroll on the main page. I also want the sidebar to scroll when it is overflown

`


<body onload="checkForName()">
  <div class="header">
    <a href="#test" id="nameOfCompany">📄 My Paper Company</a>
    <div class="header-right">
      <a href="#settings">Settings</a>
      <a href="#contact">Contact</a>
      <a href="#donate">Donate</a>
      <div class="flexcolumn">
      </div>
    </div>
  </div>
  <div id="leftmain" class="leftmain">
    <p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
  </div>
  <center>
  <div id=htpmain class="main">
    <div class="toptext">
      <h1>
        📢 How To Play
      </h1>
      <p>This guide will get you start the game and will be helpful to grasp everything you need to do.
      </p>
    </div>
    <div class="card" />
  </div>
  </center>
</body>

function checkForName() {
  let name = localStorage.getItem("storageName");
  if (name != "" && name != null) {
    alert("Welcome again " + name);
    console.log("User Relogged")
    document.getElementById("nameOfCompany").innerHTML = "📄 " + name + "'s Paper Company";
  } else {
    name = prompt("Please enter your name:", "");
    if (name != "" && name != null) {
      localStorage.setItem("storageName", name);
      console.log("Registered New User")
      document.getElementById("nameOfCompany").innerHTML = "📄 " + name + "'s Paper Company";
    }
  }
}

function hide(item) {
  document.getElementById(item).hidden = true
}

function show(item) {
  document.getElementById(item).hidden = false
}

hide("htpmain")

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

.main {
  margin-left: 345px;
  border: 0px solid #ffffff;
  padding: 0px 0px;
  flex-direction: column;
  align-content: center;
  text-align: center;
  width: 450px;
  
}

.card {
  display: inline-block;
  width: 400px;
  height: 160px;
  background-color: #404040;
  border: 1px solid #404040;
  border-radius: 4px;
  margin: 0px;
  margin-top: 20px;
  text-decoration: none;
}

.toptext {
  display: inline-block;
  width: 400px;
  height: 45px;
  color: #ffffff;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 4px;
  margin: 0px;
  margin-top: 5px;
  text-decoration: none;
  text-align: left;
}

.toptext h1 {
  font-size: 20px;
  margin-left: 0px;
  margin-top: 1px;
  color: #404040;
}

.toptext p {
  font-size: 12px;
  margin-left: 0px;
  margin-top: -10px;
  color: #404040;
}

.flexcolumn {
  flex-direction: column;
}

.leftmain {
  height: 100%;
  width: 325px;
  padding: 0px 10px;
  position: fixed;
  flex-direction: column;
  overflow-y: scroll;
  background-color: #333333;
  align-content: center;
}

.leftmain p {
  float: left;
  color: #ffffff;
  text-align: left;
  padding: 0px 10px;
  text-decoration: none;
  font-size: 12px;
  line-height: 25px;
  border-radius: 4px;
  background-color: #333333;
  width: 300px;
}

.leftmain p:hover {
  background-color: #404040;
  color: #ffffff;
}

.header {
  overflow: hidden;
  background-color: #404040;
  padding: 10px 10px;
  height: 36px;
  text-align: center;
}

.header-right {
  float: right;
  padding: 0px 0px;
}

.header a {
  float: left;
  color: #ffffff;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
  align-content: center;
}

.header a:hover {
  background-color: #333333;
  color: #ffffff;
}

Answer 1

In .leftmain class, you have specified a width of 325px , and it will not change its pixel width no matter what size your screen resolution is.

.leftmain {
   width: 325px;
}

There are many different ways to specify screen width aside from pixel count. For example, a percentage of 25% will always take up 25% of the width, no matter what your resolution is.

.leftmain {
   width: 25%;
}

Answer 2

I don't know which browser you're using, because I do not see that problem in Chrome or Firefox, but this code may help you.

/***** Styling Scrollbars *****/


/*** For Firefox ***/

:root {
  scrollbar-width: thin; /* Width of Scrollbar (works with both Vertical and Horizontal bars) */
}

/*** For Other Browsers | When doing it this way, you cannot style one part of it without specifying all of it ***/

/* Width of Scrollbar */
::-webkit-scrollbar {
  width: 6px; /* For Vertical Scrollbar */
  height: 6px; /* For Horizontal Scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
  background: Whitesmoke; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 76%);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: Gray; 
}

It makes the scrollbar smaller. The non-Firefox way is more cumbersome, but also more manipulatable. Hope it can help (or that I can understand more ).

When I make the window small the scroll bar sticks

Question

2 answers

solution1
0 2022-11-10 18:41:08

solution2
0 2022-11-17 20:21:09

When I make the window small the scroll bar sticks

Question

2 answers

solution1 0 2022-11-10 18:41:08

solution2 0 2022-11-17 20:21:09

solution1
0 2022-11-10 18:41:08

solution2
0 2022-11-17 20:21:09