将 jquery 转换为纯 javascript 或 typescript

Question

我不想在 Angular 4 中使用 jquery，但我需要将以下 jquery 代码转换为 javascript 或理想情况下的 typescript - 帮助！

var pContainerHeight = $('.bird-box').height();

$(window).scroll(function(){
  var wScroll = $(this).scrollTop();
  if (wScroll <= pContainerHeight) {
    $('.logo').css({
      'transform' : 'translate(0px, '+ wScroll / 2 +'%)'
    });
    $('.back-bird').css({
      'transform' : 'translate(0px, '+ wScroll / 4 +'%)'
    });
    $('.fore-bird').css({
      'transform' : 'translate(0px, -'+ wScroll / 40 +'%)'
    });
  }
});

Answer 1

如果每个类只有一个元素，您可以稍微简化代码，但对于一般情况：

const pContainerHeight = document.querySelector('.bird-box').clientHeight;

window.addEventListener('scroll', () => {
  const wScroll = window.scrollY;
  if (wScroll <= pContainerHeight) {
    document.querySelectorAll('.logo').forEach(el =>
      el.style.transform = `translate(0px, ${wScroll/2}%)`);
    document.querySelectorAll('.back-bird').forEach(el =>
      el.style.transform = `translate(0px, ${wScroll/4}%)`);
    document.querySelectorAll('.fore-bird').forEach(el =>
      el.style.transform = `translate(0px, ${-wScroll/40}%)`);
  }
});