javascript 移动的和平板电脑上奇怪的滚动行为

我做了一个网站，觉得为我的英雄加上视差效果会很酷。所以我实现了一个，在桌面上它工作得很好。但是当我把它切换到移动的或平板电脑上时，滚动就变得很奇怪了。当我尝试向上滚动时，有时它工作得很好，有时它根本不滚动。我不知道这个问题是否与视差效应有关，但这是我最好的猜测。
我将在下面链接一个片段与我所有的代码，但我需要一些帮助来理解为什么滚动是因为它在移动的和平板电脑上，以及我如何修复它，或者只是帮助我理解如何修复它。
顺便说一句，我也有一个“滚动到顶部”功能，有一个按钮，当向下滚动时会出现，当点击时会滚动到顶部。但是有时候当我尝试实现视差时，它就像我期望的那样停止工作了。有时候能看出来有时候看不出来。当它出现的时候，我点击它，我会得到一些双滚动条的东西，我认为这可能与这个问题有关。（这也只适用于移动的和平板电脑，在桌面上它从来没有出现过）

$(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",
  });
}

* {
  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;
  }
}

<!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 &copy; All rights reserved by Vincent Cornelius</p>
      </footer>
    </div>
  </body>
</html>

javascript 移动的和平板电脑上奇怪的滚动行为

1条答案

相关问题

热门标签

最新问答