欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

手機和平板電腦上怪異的滾動行為

CSS
錢多多1年前10瀏覽0評論

我做了一個網(wǎng)站，覺得給我的英雄一個視差效果會很酷。所以我實現(xiàn)了一個，在桌面上運行得很好。但當我把它切換到手機或平板電腦時，滾動就變得奇怪了。當我試著向上滾動時，有時可以正常工作，有時根本不能滾動。我不知道這個問題是否與視差效應有關，但這是我最好的猜測。

我將在下面鏈接一個包含我所有代碼的片段，但我需要一些幫助來理解為什么滾動會像在移動設備和平板電腦上一樣，以及我如何修復它或只是幫助我理解如何修復它。

僅供參考我也有一個& quot滾動到頂部& quot有一個按鈕的功能，向下滾動時出現(xiàn)，單擊時滾動到頂部。但有時當我試圖實現(xiàn)視差，它停止工作，因為我期望它。有時會出現(xiàn)，有時不會。當它出現(xiàn)時，我點擊它，我得到一些雙滾動條的東西，我認為這可能與問題有關。(這也僅適用于移動設備和平板電腦，在桌面上從未出現(xiàn)過)

$(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
      
      rel="stylesheet"
    />
    <link
      
      rel="stylesheet"
    />
    <link
      
      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"
      
    />
    <link
      rel="stylesheet"
      
    />
    <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>

你想用包裝類來滾動div，但是因為你的html標簽比視窗高度高，所以你首先滾動它，這就造成了你所經(jīng)歷的奇怪行為。這是由帶有菜單類的ul元素引起的。您可以通過在header或ht ml標簽中添加overflow:hidden，或者從菜單元素中刪除position: absolute來避免這種情況。