时间戳

首页 > 解决方案 > DOM中存在元素时触发JS脚本

javascript - DOM中存在元素时触发JS脚本

问题描述

我正在构建一个 Wordpress 网站，Ajaxify用于在页面之间创建平滑过渡。

在我的自定义模板page-about.php中，我有一个 JS 脚本来创建一个粘性水平滚动。该脚本工作正常。但是当我通过在网站上导航来更改页面时AJAX。它释放以下错误：

TypeError: null is not an object (evaluating 'sticky.offsetTop')

这是JS脚本：

 if ($('.wrapper-horizontal').length) {
      const spaceHolder = document.querySelector('.space-holder');
      const horizontal = document.querySelector('.horizontal');
      spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;

      function calcDynamicHeight(ref) {
        const vw = window.innerWidth;
        const vh = window.innerHeight;
        const objectWidth = ref.scrollWidth;
        return objectWidth - vw + vh + 150;
       }

        window.addEventListener('scroll', () => {
            const sticky = document.querySelector('.is-sticky-h');
            horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
        });

        window.addEventListener('resize', () => {
            spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
        });
        //# sourceURL=pen.js
  }

我尝试了这个解决方案，但在我的情况下它不起作用：

    document.addEventListener('readystatechange', function() {
        if (document.readyState === "complete") {
          // Do something
      }
    });

任何帮助将非常感激。谢谢！

标签： javascriptajaxdomscript

解决方案

推荐阅读