将 JQuery 视差翻译成纯 JavaScript

Question

我有一个只使用 this excellent parallax function 的页面，我不想为此加载 jQuery。

您能否用简单的语言编写此函数 javascript 并使其小巧易读？（必须在 IE10+，现代浏览器中工作）

$(document).ready(function(){

    function draw() {
        requestAnimationFrame(draw);
        // Drawing code goes here
        scrollEvent();
    }
    draw();

});

function scrollEvent(){

    if(!is_touch_device()){
        viewportTop = $(window).scrollTop();
        windowHeight = $(window).height();
        viewportBottom = windowHeight+viewportTop;

        if($(window).width())

        $('[data-parallax="true"]').each(function(){
            distance = viewportTop * $(this).attr('data-speed');
            if($(this).attr('data-direction') === 'up'){ sym = '-'; } else { sym = ''; }
            $(this).css('transform','translate3d(0, ' + sym + distance +'px,0)');
        });

    }
}   

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Answer 1

您可以通过查看 You Might Not Need jQuery 来完成您在这里的要求。

你的代码，翻译成原版 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;
}

将 JQuery 视差翻译成纯 JavaScript

Translate JQuery Parallax to Pure JavaScript

javascript

jquery

parallax