javascript - 使 HTML 响应视口(viewport)

Question

我创建了我的第一个网页，并使用 ScrollMagic.js 展示了视差/SplitScroll

当我在 chrome 上使用“开发者工具”在移动 View 中查看页面时，视差不起作用，因为触发器似乎有点偏离。

我上网查看如何修复移动 View 中的视差并遇到了这个 Parallax scrolling not working on mobile css

从这个答案中，我发现视差在移动 View 中通常不起作用。并且建议我在达到某个视口(viewport)时禁用视差。

正如您在我创建的代码笔上看到的那样 https://codepen.io/Jaderianne/pen/jjgWpv当屏幕很小(调整浏览器大小)时，视差 View 中的文本看起来相当压扁，所以我认为最好在达到某个视口(viewport)时禁用视差。

由于我仍在学习网络开发，这是我的第一个网页，我不确定如何在较小的屏幕上禁用视差。我想我需要在我的 CSS 中使用@media，但不确定需要包含在其中的内容..

有人能帮帮我吗？

代码在我上面链接的代码笔中可见。

一些HTML:

<section id="About" class="about">

<div class="about-title">
  <h2>About Us</h2>
</div>

<div class="about-pages">
  <div>
    <h2>About 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, 
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
  <div>
    <h2>About 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, 
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
  <div>
    <h2>About 3</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, 
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
</div>
</section>

可以在 CODEPEN 上看到 CSS。

Javascript:

function splitScroll() {
const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  duration: '200%',
  triggerElement: '.about-title',
  triggerHook: 0
})

.setPin('.about-title')
.addTo(controller)

new ScrollMagic.Scene({
    duration: '200%',
    triggerElement: '.services-title',
    triggerHook: 0
  })

  .setPin('.services-title')
  .addTo(controller)

}

splitScroll();

我希望 About 1、About 2 和 About 3 直接显示在“关于我们”下方，反之亦然(在移动 View 中)“服务”部分

Answer 1

我不确定这是否是最好的方法但是您可以尝试使用相同的 HTML 创建一个新的 div(不包括任何链接到 JavaScript 的内容)但专为移动设备设计并使用“显示:无”隐藏它；然后将所有样式用于非视差移动 View ，以及'display: block;'(对于移动 HTML)和 'display: none; (对于桌面视差 HTML)在:

@media 屏幕和(最大宽度:500 像素){

这意味着该 css 仅在屏幕尺寸小于 500px(手机宽度)时显示