修复响应式网站的媒体相关 JavaScript 动画

使用 JavaScript 处理基于媒体查询的条件动画

该解决方案通过结合使用 JavaScript 来处理依赖于屏幕宽度的条件动画 窗口.matchMedia 功能。

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

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

function scrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQueryNav.matches) {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  if (mediaQueryCta.matches) {
    // CTA scroll for mobile screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  }
  prevScrollpos = currentScrollPos;
}

针对不同屏幕尺寸使用单独事件侦听器的模块化方法

该版本更加高效和模块化，因为它为每个媒体查询使用不同的滚动事件侦听器。

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

mediaQueryNav.addEventListener("change", handleNavScroll);
mediaQueryCta.addEventListener("change", handleCtaScroll);

function handleNavScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", navScrollFunction);
  } else {
    window.removeEventListener("scroll", navScrollFunction);
  }
}

function handleCtaScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", ctaScrollFunction);
  } else {
    window.removeEventListener("scroll", ctaScrollFunction);
  }
}

function navScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navigation").style.top = "0";
  } else {
    document.getElementById("navigation").style.top = "-90px";
  }
  prevScrollpos = currentScrollPos;
}

function ctaScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header-button").style.left = "0.25in";
  } else {
    document.getElementById("header-button").style.left = "-10in";
  }
  prevScrollpos = currentScrollPos;
}

// Initial call to apply the correct event listeners
handleNavScroll(mediaQueryNav);
handleCtaScroll(mediaQueryCta);

将条件逻辑应用于媒体查询的统一滚动处理程序

此方法使用单个滚动事件侦听器，并根据媒体查询进行条件检查来处理两个动画。

var prevScrollpos = window.pageYOffset;
var mediaQuery = window.matchMedia("(max-width: 450px)");

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

function scrollHandler() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQuery.matches) {
    // CTA scroll for mobile
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  } else {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  prevScrollpos = currentScrollPos;
}

有关 JavaScript 动画和媒体查询的常见问题

1. 如何在 JavaScript 中使用媒体查询？
2. JavaScript 允许您应用媒体查询 window.matchMedia()。您可以使用这种方式根据屏幕的宽度运行不同的脚本。
3. 如何根据屏幕尺寸控制动画？
4. 使用 window.matchMedia() 确定屏幕宽度以控制动画。然后，根据需要添加或删除事件侦听器。这保证了根据屏幕尺寸，仅播放相关动画。
5. 优化滚动动画的最佳方法是什么？
6. 通过减少滚动事件内部执行的操作数量， window.onscroll 可以更有效地用于滚动动画优化。当检测到滚动时，才会执行所需的动画逻辑。
7. 如何在 JavaScript 中处理多个动画？
8. 可以通过将多个动画划分为不同的条件和事件侦听器来管理它们。这降低了冲突的可能性，因为每个动画都是单独运行的。
9. 什么是 prevScrollpos 和 currentScrollPos 在滚动动画中做什么？
10. 这些变量监视用户滚动的位置。上一个滚动位置存储在 prevScrollpos，当前滚动位置存储在 currentScrollPos。通过比较它们可以判断用户是向上还是向下滚动。

关于基于媒体查询的动画的最终想法

总之，创建响应式网站需要管理各种设备的 JavaScript 动画。开发人员可以使用以下工具根据屏幕宽度触发特定的动画，从而提供最佳的用户体验 window.matchMedia()。

如果实施正确，网站可以增强其在各种设备上的视觉行为和性能。实现此目的的一种方法是有选择地应用滚动动画并将它们隔离。此方法保证桌面和移动动画之间的无缝过渡，并有助于防止脚本冲突。