Question

我不想在angular4中使用jquery，但是我需要将以下jquery代码转换为javascript或者理想的打字稿 - help！

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}%)`);
  }
});

Answer 2

很抱歉提出这个问题 - 并不意味着要求帮助charlieft让人不高兴！我会解决它 - 上面的代码有帮助但不是我想要的 - 真的需要知道在角度框架中将我自己的ts代码放在哪里而不会出现错误LOL 祝大家一切顺利。

将jquery转换为纯javascript或打字稿

2 个答案: