将JQuery视差转换为纯JavaScript

我有一个只使用jQuery的页面，我不想为此加载jQuery

你能用普通的javascript编写这个函数并保持它的小而可读性吗？（必须在IE10+和现代浏览器中工作）

---

您可以通过查看来执行您在这里要求的操作

翻译成香草javascript的代码应该如下所示：

document.addEventListener('DOMContentLoaded', function() {
  function draw() {
    requestAnimationFrame(draw);
    // Drawing code goes here
    scrollEvent();
  }
  draw();
});

function scrollEvent() {
  if (!is_touch_device()){
    var viewportTop = window.scrollY;
    var windowHeight = document.documentElement.clientHeight;
    var viewportBottom = windowHeight + viewportTop;

    if (document.documentElement.clientWidth) {
      var parallax = document.querySelectorAll('[data-parallax="true"]');
      for (var i = 0; i < parallax.length; i++) {
        var item = parallax[i];
        var distance = viewportTop * item.getAttribute('data-speed');
        var sym = item.getAttribute('data-direction') === 'up' ? '-' : '';
        item.style.transform = 'translate3d(0, ' + sym + distance +'px,0)';
      }    
    }
  }
}

function is_touch_device() {
  return 'ontouchstart' in window || 'onmsgesturechange' in window;
}

document.addEventListener（'DOMContentLoaded'，function（）{
函数绘图（）{
请求动画帧（绘制）；
//绘图代码在这里
scrollEvent（）；
}
draw（）；
});
函数scrollEvent（）{
如果（！is_touch_device（））{
var viewportTop=window.scrollY；
var windowHeight=document.documentElement.clientHeight；
var viewportBottom=windowHeight+viewportTop；
if（document.documentElement.clientWidth）{
var parallax=document.querySelectorAll（“[data parallax=“true”]”）；
对于（var i=0；i

document.addEventListener('DOMContentLoaded', function() {
  function draw() {
    requestAnimationFrame(draw);
    // Drawing code goes here
    scrollEvent();
  }
  draw();
});

function scrollEvent() {
  if (!is_touch_device()){
    var viewportTop = window.scrollY;
    var windowHeight = document.documentElement.clientHeight;
    var viewportBottom = windowHeight + viewportTop;

    if (document.documentElement.clientWidth) {
      var parallax = document.querySelectorAll('[data-parallax="true"]');
      for (var i = 0; i < parallax.length; i++) {
        var item = parallax[i];
        var distance = viewportTop * item.getAttribute('data-speed');
        var sym = item.getAttribute('data-direction') === 'up' ? '-' : '';
        item.style.transform = 'translate3d(0, ' + sym + distance +'px,0)';
      }    
    }
  }
}

function is_touch_device() {
  return 'ontouchstart' in window || 'onmsgesturechange' in window;
}