在我打开控制台之前，无法在网站上看到我的完整页面-解网

问：

function init() {
  gsap.registerPlugin(ScrollTrigger);

  // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll

  const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".main"),
    smooth: true,
  });
  // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
  locoScroll.on("scroll", ScrollTrigger.update);

  // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
  ScrollTrigger.scrollerProxy(".main", {
    scrollTop(value) {
      return arguments.length
        ? locoScroll.scrollTo(value, 0, 0)
        : locoScroll.scroll.instance.scroll.y;
    }, // we don't have to define a scrollLeft because we're only scrolling vertically.
    getBoundingClientRect() {
      return {
        top: 0,
        left: 0,
        width: window.innerWidth,
        height: window.innerHeight,
      };
    },
    // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
    pinType: document.querySelector(".main").style.transform
      ? "transform"
      : "fixed",
  });

  // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
  ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

  // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
  ScrollTrigger.refresh();
}

init();

var crsr = document.querySelector(".cursor");
var main = document.querySelector(".main");
main.addEventListener("mousemove", (dets) => {
  crsr.style.left = dets.clientX + "px";
  crsr.style.top = dets.clientY + "px";
});

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".page1 h1",
    scroller: ".main",
    // markers: true,
    start: "top 27%",
    end: "top -50%",
    scrub: 2,
  },
});

tl.to(
  ".page1 h1",
  {
    x: -100,
    //   duration: 1,
  },
  "anim"
);

tl.to(
  ".page1 h2",
  {
    x: 80,
  },
  "anim"
);

tl.to(
  ".page1 video",
  {
    width: "100%",
  },
  "anim"
);
var tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".page1 h1",
    scroller: ".main",
    start: "top -50%",
    end: "top -100%",
    scrub: 2,
    // markers: true,
  },
});
tl2.to(".main", {
  backgroundColor: "#fff",
});

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  color: #fff;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
  width: 100%;
}
.cursor {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: absolute;
  background-color: #edbfff;
  z-index: 8;
  mix-blend-mode: difference;
}

.main {
  background-color: #0f0d0d;
}

.page1 {
  min-height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 9;
}

#nav {
  height: 55px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

#nav img {
  height: 24px;
}

#nav-part2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#nav #circle {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
}

#nav h4 {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
}

#nav h4:nth-child(1) {
  border-bottom: 1.5px solid #fff;
}

.page1 h1 {
  font-size: 8vw;
  font-weight: 300;
  font-family: PP mori;
  margin-top: 12vw;
  margin-left: 6vw;
}

.page1 h2 {
  font-size: 8vw;
  font-weight: 300;
  font-family: PP mori;
  margin-left: 26vw;
}

.page1 video {
  width: 60%;
  margin-top: 10vw;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.page2 {
  min-height: 80vh;
  width: 100%;
  padding: 100px 5vw;
  border-bottom: 2px solid #626262;
  position: relative;
  z-index: 9;
}

.page2 h1 {
  font-size: 7vw;
  font-weight: 400;
  color: #111;

  font-family: PP mori;
}

.page2-container {
  height: 60vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page2-left {
  width: 38%;
}

.page2-right {
  width: 24%;
}

.page2-left h2 {
  font-size: 4vw;
  font-weight: 200;
  color: #111;
  line-height: 4vw;
  font-family: PP mori;
}

.page2-right p {
  font-size: 20px;
  color: #111;
  font-family: PP mori;
}

.page2-right button {
  width: 100%;
  border-radius: 50px;
  border: none;
  padding: 4px 0;
  background-color: #edbfff;
  color: #111;
  margin-top: 20px;
}

.page3 {
  min-height: 100vh;
  width: 100%;
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  z-index: 9;
  border-bottom: 2px solid #626262;
}

.page3 h1 {
  font-size: 6.8vw;
  font-weight: 400;
  color: #111;
  margin-left: 100px;
  font-family: PP mori;
}

.page3-part1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.page3-part1 img {
  height: 550px;
  margin-top: 160px;
}

.page3-part1 video {
  height: 450px;
}

.page3-ending {
  padding-top: 100px;

  font-family: PP mori;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page3-ending h1 {
  color: #111;
  font-weight: 400;
  font-size: 5vw;
}

.page3-ending a {
  color: #0f0d0d;
  margin-right: 100px;
  height: 200px;
  width: 200px;
  background-color: #edbfff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 400;
  font-size: 13px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
</head>

<body>
    <div class="cursor">

    </div>
    <div class="main">
        <div class="page1">

            <div id="nav">
                <img src="https://d33wubrfki0l68.cloudfront.net/439bf938233c24af021ffe6d206cd42f546e1143/ff4ed/assets/logo.svg"
                    alt="">
                <div id="nav-part2">
                    <h4>Home</h4>
                    <h4>Work</h4>
                    <h4>Studio</h4>
                    <h4>Contact</h4>
                </div>
                <div id="nav-part3">
                    <div id="circle">

                    </div>
                </div>
            </div>

            <h1>Digitally crafted</h1>
            <h2>brand experiences</h2>

            <video autoplay muted loop src="assets/Pexels Videos 1720428.mp4"></video>

        </div>

        <div class="page2">
            <h1>We are Duo Studio,</h1>
            <div class="page2-container">
                <div class="page2-left">
                    <h2>
                        A CREATIVE COLLECTION MADE TO UNLOCK YOUR BRAND'S POTENTIAL
                    </h2>
                </div>
                <div class="page2-right">
                    <p>We weave together bold strategy and creative execution to produce thought-provoking digital
                        experiences. We take a highly personalized approach to delivering branding, web design, and
                        content marketing solutions. Born in the DC area - now serving clients worldwide.</p>
                    <button>About us</button>
                </div>
            </div>
        </div>

        <div class="page3">
            <h1>Selected Works</h1>
            <div class="page3-part1">
                <img src="https://d33wubrfki0l68.cloudfront.net/aa3d2ff66de5f16336bd94fd68c3c2ce61e29f68/d5064/assets/home/home-casestudy-mgny.webp"
                    alt="">
                <video autoplay loop muted
                    src="https://d33wubrfki0l68.cloudfront.net/a13ea7c2ca2f38134748966280e54af4340ce821/f976d/assets/home/projects_madegood-reduced.mp4"></video>
            </div>
            <div class="page3-part1">
                <img src="https://d33wubrfki0l68.cloudfront.net/aa3d2ff66de5f16336bd94fd68c3c2ce61e29f68/d5064/assets/home/home-casestudy-mgny.webp"
                    alt="">
                <video autoplay loop muted
                    src="https://d33wubrfki0l68.cloudfront.net/a13ea7c2ca2f38134748966280e54af4340ce821/f976d/assets/home/projects_madegood-reduced.mp4"></video>
            </div>
            <div class="page3-ending">
                <h1>VIEW ALL PROJECTS</h1>
                <a href="">DISCOVER</a>
            </div>

        </div>
         </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
        integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
        integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="script.js"></script>
</body>

</html>

我使用 HTML、CSS、JavaScript（机车、gsap）创建了一个网站。到目前为止，我创建了 3 个页面，运行良好，但由于某些原因我看不到我的完整页面#3，但是当我打开控制台时，它会恢复正常并显示完整页面，但当我刷新时，它又会回到半页。我不知道为什么会这样，你们可以看看我的代码并帮助我找到问题，这是我的代码。（当我打开实时服务器时看不到 div 名称 page3）

我的页面上没有 GSAP#3。

我尝试将高度更改为 100vh 或将其增加到 250vh，但它不起作用，通过删除（min）或仅给出（height），我在页面上的 3 个元素上得到了一个滚动条。

此外，我的网站滚动条有时会停止工作一两秒钟，因此我很困惑，请指导我。

谢谢。

HTML CSS 机车涡旋

1赞 Peter Pointer 9/14/2023

您可以将代码设置为可运行的代码片段（按钮）。这样，如果可重现，我们可以直接看到您的问题。一些 JavaScript 在这里做了什么，还是纯粹与 CSS 相关？<>

1赞 saribcantcode 9/14/2023

@PeterKrebs 您现在可以检查一下我创建了一个片段。我不认为 JavaScript 导致了这里的问题，但我附加了它。

0赞 Peter Pointer 9/14/2023

谢谢，有帮助👍🏻，但是我看不到您描述的问题。您是否清除了浏览器缓存？我发现使用 inkognito-mode 进行测试也有所帮助，因为网站将像访问该页面的新用户一样进行测试。

0赞 saribcantcode 9/15/2023

@PeterKrebs我清除了浏览器缓存并尝试以隐身模式打开，但我仍然遇到同样的问题，第一次尝试使用实时服务器打开时工作正常，但是当我刷新页面时，它会返回显示半页，直到我打开控制台，它恢复正常。

答：

0赞 learncoding 12/2/2023 #1

您面临的问题是由于每个页面的 min-height 属性。您必须设置高度而不是最小高度。由于您不知道页面的高度是多少，因此请通过试错法。或者你可以这样设置它：第 1 页高度：200VH，第 2 页高度：90VH，第 3 页高度：270 VH，第 4 页高度：100VH，第 5 页高度：100VH，页脚高度：100VH（我也在制作 Sherriyans 学校项目，我通过在第 3 页添加更多项目使其有点不同，因此它需要 270VH 的生存。但是你可以调整它，你只需要将最小高度更改为高度。希望能有所帮助

上一个：视差平滑效果在 React 中使用 locomotive-scroll 不起作用

下一个：当我到达终点时，机车滚动条变白

在我打开控制台之前，无法在网站上看到我的完整页面

Cannot see my complete page on website until I open Console

评论