Weird scrolling behavior on mobile and tablet

I made a website and thought it would be cool with a parallax effect for my hero. So I implemented one, and on desktop it works just fine. But when I switch it over to mobile or tablet the scrolling gets wierd. When I try to scroll upwards sometimes it works just fine and sometimes it just doesn't scroll at all. I don't know if the problem even has to do with the parallax effect but it would be my best guess.

I'll link a snippet with all my code down below, but what I want some help with understanding is why the scrolling is as it is on mobile and tablet, and how I can fix it or just helping me understand how to fix it.

FYI I also have a "scroll to top" feature with a button that apears when scrolling down and scrolls to the top when clicked. But sometime when I tried implementing the parallax it stopped working as I expect it to. Sometimes it apears and sometimes it just doesn't. And when it do apear and I click it I get some double scrollbar stuff that I think could have to do with the problem. (This is also just for mobile and tablet, on desktop it never apears)

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

$(document).ready(function () {
  // Hamburger
  $(".burger-container").click(function () {
    $(".nav-menu").toggleClass("menu-opened");
    $("body").toggleClass("unscrollable");
    $(".toggler-container").slideToggle("slow");
  });

  // Dark-Light switcher
  $("body").toggleClass("light", localStorage.toggled == "light");

  document.getElementById("checkBox").addEventListener("click", darkLight);

  function darkLight() {
    if (localStorage.toggled != "light") {
      $("body").toggleClass("light", true);
      localStorage.toggled = "light";
    } else {
      $("body").toggleClass("light", false);
      localStorage.toggled = "";
    }
  }

  if ($("body").hasClass("light")) {
    $("#checkBox").prop("checked", true);
  } else {
    $("#checkBox").prop("checked", false);
  }
});

// Scroll to top
button = document.getElementById("scroll-button");

button.addEventListener("click", topFunction);

window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
}

function topFunction() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
}

<!-- language: lang-css -->

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Dark colors */
:root {
--white-color: #d9d9d9;
--black-color: #0d0d0d;
--grey-color-1: #595959;
--body-bg-color: #262626;
--text-hover-color: #a6a6a6;
}
/* Light colors */
:root .light {
--body-bg-color: #dfdfdf;
--black-color: blue;
--white-color: black;
}
/* ======== MAIN CSS ======== */
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background-color: var(--body-bg-color) !important;
position: relative;
overflow: hidden;
font-family: "Nunito", sans-serif;
color: var(--white-color);
}
main {
background-color: var(--body-bg-color);
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
z-index: 999;
position: sticky;
top: 0;
left: 0;
width: 100%;
transition: 0.5s ease;
}
nav {
width: 100vw;
height: 3.5rem;
background-color: var(--black-color);
}
.unscrollable {
overflow: hidden;
}
.active {
text-decoration: underline;
}
/* ======= PARALLAX ======= */
.parallax {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
transform: translateZ(-10px) scale(2);
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.foreground {
transform: translateZ(-5px) scale(1.5);
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.background,
.foreground {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.hero-text {
text-align: center;
color: var(--white-color);
position: absolute;
top: 50%;
left: 50%;
min-width: 14rem;
transform: translate(-50%, -50%);
}
.hero-text > h1 {
font-size: 3rem;
}
.hero-text > p {
font-size: 1rem;
}
/* ======== HAMBURGER ======== */
.burger-container {
position: absolute;
right: 0.5rem;
top: 0.1rem;
display: inline-block;
height: 50px;
width: 50px;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
user-select: none;
z-index: 999;
-webkit-tap-highlight-color: transparent;
}
#burger {
position: relative;
top: 50%;
width: 18px;
height: 8px;
display: block;
margin: -4px auto 0;
}
.bar {
position: relative;
width: 100%;
height: 1px;
display: block;
background: var(--white-color);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0s;
}
.topBar {
transform: translateY(0px) rotate(0deg);
}
.btmBar {
transform: translateY(6px) rotate(0deg);
}
.menu {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0;
height: 100%;
list-style: none;
}
.nav-menu {
transition: all 0.3s ease;
}
.menu-item {
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99),
opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
border-bottom: var(--body-bg-color) solid 1px;
opacity: 0;
}
.menu-item a {
display: block;
position: relative;
color: var(--white-color);
font-family: "Roboto", sans-serif;
font-weight: 300;
text-decoration: none;
font-size: 1.4rem;
line-height: 2.35;
width: 100%;
}
.menu-item a:hover {
color: var(--text-hover-color);
}
.nav-menu.menu-opened {
position: absolute;
top: 0;
height: 100vh;
width: 100vw;
background-color: var(--black-color);
opacity: 0.92;
backdrop-filter: blur(5px);
box-shadow: inset 0 0 5rem #000000;
transition: all 0.3s ease-in, 0.5s ease-in;
transition-delay: 0.1s;
}
.nav-menu.menu-opened .burger-container {
transform: rotate(90deg);
}
.nav-menu.menu-opened .burger-container #burger .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.2s;
}
.nav-menu.menu-opened .burger-container #burger .bar.topBar {
transform: translateY(4px) rotate(45deg);
}
.nav-menu.menu-opened .burger-container #burger .bar.btmBar {
transform: translateY(3px) rotate(-45deg);
}
.nav-menu.menu-opened ul.menu li.menu-item {
transform: scale(1) translateY(0px);
opacity: 1;
}
/* ======== Dark Light switcher ====== */
.switcher > span {
color: var(--white-color);
padding: 0 0.5rem;
font-size: 1.3rem;
}
.switcher {
display: flex;
align-items: center;
}
.toggler-container {
display: none;
margin-top: 1rem;
}
.switch {
position: relative;
align-self: center;
display: inline-block;
width: 3.2rem;
height: 1.5rem;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
background-color: #808080;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 1rem;
}
.slider:before {
position: absolute;
left: 4px;
bottom: 4px;
content: "";
height: 1rem;
width: 1rem;
background-color: var(--white-color);
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #808080;
}
input:checked + .slider:before {
-webkit-transform: translateX(1.7rem);
-ms-transform: translateX(1.7rem);
transform: translateX(1.7rem);
}
/* ======== CONTENT ======= */
.content {
text-align: center;
margin: 0 5% 0 5%;
padding-top: 1.5rem;
color: var(--white-color);
}
.content h2 {
font-size: 1.4rem;
font-family: "Roboto", sans-serif;
}
.content p {
font-size: 1.1rem;
font-family: "Nunito", sans-serif;
}
.img {
display: block;
}
/* ======== UP ARROW ========*/
#scroll-button {
display: none;
position: fixed;
bottom: 1rem;
right: 1.2rem;
z-index: 998;
border: none;
outline: none;
background-color: transparent;
color: var(--white-color);
font-size: 1.5rem;
cursor: pointer;
border-radius: 50%;
}
/* ======== FOOTER ======== */
footer {
padding: 3rem 0 6rem 0;
background-color: var(--grey-color-1);
position: sticky;
bottom: 0;
z-index: -2;
}
footer ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 1.3rem;
}
footer ul a {
color: var(--white-color);
text-decoration: none;
}
footer ul li {
display: block;
padding: 0.25rem 0;
}
footer ul a:hover {
color: var(--text-hover-color);
}
footer hr {
color: var(--text-hover-color);
max-width: 13rem;
margin: 1.5rem auto;
}
footer .copyright {
margin-top: 1rem;
text-align: center;
font-size: 0.75rem;
color: var(--text-hover-color);
}
/* ======== MEDIA QUERIES ======== */
/* TABLET */
@media only screen and (min-width: 600px) {
/* ======= FOOTER ======= */
footer ul {
font-size: 1.1rem;
}
footer ul li {
display: inline-block;
padding: 0 0.2rem;
}
footer hr {
max-width: 35rem;
}
}
/* DESKTOP */
@media only screen and (min-width: 769px) {
/* ======== MAIN CSS ======== */
.hero-text {
position: absolute;
top: 40%;
left: 30%;
max-width: 20rem;
}
.hero-text > h1 {
font-size: 3.5rem;
}
.hero-text > p {
font-size: 1.2rem;
}
/* ======= Scrollbar ======== */
::-webkit-scrollbar {
width: 7px;
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
background: rgb(109, 109, 109);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(148, 148, 148);
}
/* ======== HAMBURGER ======== */
nav {
width: 100%;
background-color: var(--black-color);
backdrop-filter: none;
}
.nav-menu {
transition: all 0.3s ease-in, 0.5s ease-in;
transition-delay: 0.25s;
width: 100%;
height: 3.5rem;
display: flex;
align-items: center;
}
.nav-menu.menu-opened {
height: 100%;
}
.burger-container {
display: none;
}
.menu-item {
transform: scale(1) translateY(0px);
opacity: 1;
display: inline;
margin-right: 0.8rem;
border-bottom: 0;
margin-top: 0;
}
.menu {
flex-direction: row;
position: absolute;
top: 0;
margin: 0 0 0 1.5rem;
height: 3.5rem;
width: 100%;
}
.menu-item a {
display: inline;
font-size: 1rem;
transition: all 0.15s cubic-bezier(0.54, 0.12, 0.54, 0.94);
}
.flex-filler {
flex: 1 1 auto;
}
/* ======== Dark-light switcher ======== */
.toggler-container {
display: block;
margin: 0 2.5rem 0 0;
}
.switcher > span {
font-size: 1.2rem;
padding: 0 0.4rem;
}
.switch {
width: 2.5rem;
height: 1.3rem;
}
.slider:before {
height: 0.8rem;
width: 0.8rem;
left: 4px;
bottom: 4px;
}
input:checked + .slider:before {
-webkit-transform: translateX(1.2rem);
-ms-transform: translateX(1.2rem);
transform: translateX(1.2rem);
}
/* ======== CONTENT ========*/
.content {
margin: 0 20% 0 20%;
padding-top: 2rem;
}
.content h2 {
font-size: 1.5rem;
}
.content p {
font-size: 1.15rem;
}
/* ======== UP ARROW ========*/
#scroll-button {
position: fixed;
height: 3rem;
width: 3rem;
bottom: 1.1rem;
right: 1.1rem;
}
#scroll-button:hover {
background-color: rgba(160, 160, 160, 0.568);
backdrop-filter: blur(15px);
}
/* ======= FOOTER ======= */
}
/* XL-DESKTOP */
@media only screen and (min-width: 1200px) {
/* ======= HAMBURGER ======= */
.menu-item {
margin-right: 1.3rem;
}
.menu-item a {
font-size: 1.1rem;
}
/* ======= FOOTER ======= */
footer ul {
font-size: 1.2rem;
}
footer ul li {
padding: 0 0.4rem;
}
footer hr {
max-width: 40rem;
}
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lagar och säkerhet | Hem</title>
<link rel="stylesheet" href="css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<script defer src="js/script.js"></script>
</head>
<!--
Att göra: 
Fixa bilder till Hero parallax
Skriva content
Fixa bilder till content (Picture element, bootstrap)
Lägga in all content på index och subpages (Bootstrap)
Fixa up arrow så den funkar
Tablet responsive media query
Hamburger close animation (Inte prio)
-->
<body>
<header>
<nav>
<div class="nav-menu">
<div class="burger-container">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
<ul class="menu">
<li class="menu-item"><a href="#">Hem</a></li>
<li class="menu-item"><a href="html/losenord.html">Lösenord</a></li>
<li class="menu-item">
<a href="html/sakerhetshot.html">Säkerhetshot</a>
</li>
<li class="menu-item">
<a href="html/statlig-kontroll.html">Statlig kontroll</a>
</li>
<li class="menu-item">
<a href="html/tredjepartskod.html">Tredjepartskod</a>
</li>
<li class="menu-item">
<a href="html/webbhotell.html">Webbhotell</a>
</li>
<div class="flex-filler"></div>
<div class="toggler-container">
<div class="switcher">
<span class="material-symbols-outlined"> dark_mode </span>
<label class="switch">
<input type="checkbox" id="checkBox" />
<span class="slider"></span>
</label>
<span class="material-symbols-outlined"> light_mode </span>
</div>
</div>
</ul>
</div>
</nav>
</header>
<div class="wrapper">
<header class="parallax">
<img src="https://cdn.imgpaste.net/2022/10/10/Kem93m.png" class="background" />
<img src="https://cdn.imgpaste.net/2022/10/10/KemO9N.png" class="foreground" />
<div class="hero-text">
<h1>Lagar och säkerhet</h1>
<p>
Hemsidan om lagar och säkerhet på internet här står det massa saker wow omg coolt :I
</p>
</div>
</header>
<main>
<div class="content">
<section>
<h2>Hejehje</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni in aut quisquam ipsa,
reiciendis quidem rem facilis quaerat nam est! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Libero, nulla perferendis? Officia illo vitae alias obcaecati nulla
porro quisquam, praesentium id vel ex culpa deleniti neque reiciendis officiis nisi
quaerat.
</p>
</section>
<img class="img"            src="https://ichef.bbci.co.uk/news/999/cpsprodpb/15951/production/_117310488_16.jpg" alt="picture">
</div>
<button id="scroll-button" title="Gå till toppen">
<i class="fas fa-arrow-up"></i>
</button>
</main>
<footer>
<ul class="list">
<li>
<a href="#" class="active">Hem</a>
</li>
<li>
<a href="html/losenord.html">Lösenord</a>
</li>
<li>
<a href="html/sakerhetshot.html">Säkerhetshot</a>
</li>
<li>
<a href="html/statlig-kontroll.html">Statlig kontroll</a>
</li>
<li>
<a href="html/tredjepartskod.html">Tredjepartskod</a>
</li>
<li>
<a href="html/webbhotell.html">Webbhotell</a>
</li>
</ul>
<hr />
<p class="copyright">Copyright © All rights reserved by Vincent Cornelius</p>
</footer>
</div>
</body>
</html>

<!-- end snippet -->

Well you want to scroll the div with wrapper class but since your html tag has a higher height than the viewport you are scrolling it first which makes the odd behavior you are experiencing. This is caused by ul element with menu class. You can avoid this by adding overflow:hidden to your header or html tag or by removing the position: absolute from your menu element.