如何结合Media Queries与jQuery实现随屏幕尺寸动态修改滚动运算参数

实现方案 #

这个需求完全可以实现，核心思路是通过视口尺寸动态计算滚动系数、初始偏移等参数，同时监听窗口尺寸变化事件实时更新参数即可。

具体优化逻辑如下：

• 首先封装参数计算函数，根据当前屏幕宽度/高度返回适配的滚动乘算系数、初始偏移值，你可以根据自己的布局需求调整不同尺寸区间的参数阈值
• 增加窗口resize事件监听，搭配防抖逻辑避免频繁重计算，窗口尺寸变化时自动更新参数，无需刷新页面生效
• 原有滚动逻辑里的固定数值替换为动态计算的参数即可

优化后的完整代码：

// 存储动态参数的变量
let scrollFactor, initLeftOffset;

// 动态计算参数的函数，可根据实际需求调整尺寸阈值和对应参数
function calcDynamicParams() {
  const viewportWidth = window.innerWidth;
  if (viewportWidth < 768) {
    // 移动端适配
    scrollFactor = 0.6;
    initLeftOffset = 1200;
  } else if (viewportWidth < 1200) {
    // 平板适配
    scrollFactor = 0.8;
    initLeftOffset = 1600;
  } else {
    // 桌面端适配
    scrollFactor = 1;
    initLeftOffset = 2000;
  }
}

// 防抖函数，避免resize时频繁触发计算
function debounce(func, delay = 150) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

// 初始化参数
calcDynamicParams();
// 窗口尺寸变化时重新计算参数
$(window).on('resize', debounce(calcDynamicParams));

// 原有滚动逻辑，替换为动态参数
$(document).on('scroll', function() { //Slides Bio into view
  $('h2').css("left", Math.max(initLeftOffset - scrollFactor * window.scrollY, 100) + "px");
})

如果你需要根据屏幕高度而非宽度适配，把window.innerWidth换成window.innerHeight调整判断逻辑即可，各个尺寸区间的参数你可以根据实际动画效果需求自行调整。

内容的提问来源于stack exchange，提问作者ConnorGray97