如何获取含指定类元素的数据属性？ES5原生JS视差效果疑问

1. 获取包含特定类名元素的数据属性 #

在ES5环境下，你可以通过两种实用方法定位目标元素，再提取它们的data属性：

方法一：使用getElementsByClassName #

这个方法会返回一个动态的HTMLCollection，你需要遍历它来处理每个元素：

// 替换成你的目标类名
var targetElements = document.getElementsByClassName('parallax-element');

// 遍历集合中的每个元素
for (var i = 0; i < targetElements.length; i++) {
  var currentElem = targetElements[i];
  
  // 方式A：利用dataset属性（ES5支持，注意data属性名要转驼峰，比如data-scroll-speed → scrollSpeed）
  var scrollSpeed = currentElem.dataset.scrollSpeed;
  
  // 方式B：使用getAttribute直接获取属性值
  var scrollSpeedAlt = currentElem.getAttribute('data-scroll-speed');
  
  console.log('当前元素的视差速度:', scrollSpeed);
}

方法二：使用querySelectorAll #

这个方法返回一个静态的NodeList，同样需要遍历处理：

var targetElements = document.querySelectorAll('.parallax-element');

for (var i = 0; i < targetElements.length; i++) {
  var currentElem = targetElements[i];
  var scrollSpeed = currentElem.dataset.scrollSpeed;
  // 或者用getAttribute获取
}

小提示：dataset会自动把data-开头的属性名转为驼峰命名，比如data-custom-value对应dataset.customValue，用起来更简洁；如果需要兼容极旧的浏览器，getAttribute是更稳妥的选择。

2. ES5原生JavaScript实现基于data属性的视差滚动 #

结合你提到的需求，我们可以通过监听滚动事件，读取每个视差元素的data-scroll-speed属性来控制滚动速度，实现视差效果。下面是完整的实现思路和代码：

第一步：HTML结构 #

先给需要做视差的元素加上类名和data属性：

<div class="parallax-element" data-scroll-speed="0.5">
  我是慢速度的视差元素
</div>
<div class="parallax-element" data-scroll-speed="0.8">
  我是快速度的视差元素
</div>

第二步：JavaScript实现 #

// 获取所有视差元素
var parallaxElements = document.querySelectorAll('.parallax-element');

// 滚动事件处理函数
function handleParallaxScroll() {
  // 获取当前页面滚动的垂直距离（兼容不同浏览器）
  var scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
  
  // 遍历每个视差元素，计算并应用位移
  for (var i = 0; i < parallaxElements.length; i++) {
    var elem = parallaxElements[i];
    // 读取data-scroll-speed的值，转为数字，默认设为0.5防止属性缺失
    var scrollSpeed = parseFloat(elem.dataset.scrollSpeed) || 0.5;
    // 计算位移：滚动距离 × 速度，负数可以让元素反向滚动，根据需求调整
    var translateY = scrollDistance * scrollSpeed;
    // 应用transform实现位移（ES5兼容写法）
    elem.style.transform = 'translateY(' + translateY + 'px)';
  }
}

// 监听页面滚动事件
window.addEventListener('scroll', handleParallaxScroll);

性能优化：添加节流函数 #

滚动事件会频繁触发，可能导致性能问题，我们可以加个节流函数来减少触发频率：

// 节流函数：限制函数在指定时间内只执行一次
function throttle(func, delay) {
  var timer = null;
  return function() {
    var context = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

// 用节流包装滚动处理函数，16ms约对应60fps的刷新频率
window.addEventListener('scroll', throttle(handleParallaxScroll, 16));

这样就能实现基于data属性控制速度的视差滚动效果啦，你可以根据需求调整位移的方向（比如把translateY改成负数，让元素向上滚动）或者修改速度值。

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