檢查 JavaScript 中是否存在 var 以避免 undefined.top 錯誤

Question

在我的主頁上，我有一個視頻模塊，下面的 JS 在這些cards中進行了動畫處理。

我所有的 JS 都縮小了，因此，當轉到沒有此模塊的頁面時，我得到Cannot read property 'top' of undefined 。

為了防止這種情況，我試圖在執行腳本之前檢查變量是否存在，但它不起作用。 為什么以下不起作用：

 var scrolled = false; $(window).on('scroll', function() { scrolled = true; }); function loadCards() { if (scrolled) { var wScroll = $(this).scrollTop(); if(wScroll > $('.vidCard').offset().top - ($(window).height() / 1.5)) { $('.vidCard').each(function(i){ setTimeout(function(){ $('.vidCard' ).eq(i).addClass('is-showing'); }, 150 * (i+1)); }); } } } $(window).scroll(function() { loadCards(); }); $(function() { loadCards(); });

Answer 1

使用 offsetTop 而不是 .offset().top

這個答案可以幫助你： offsetTop vs. jQuery.offset().top

Answer 2

我認為您在var wScroll = $(this).scrollTop();中使用的this關鍵字是導致問題的原因。 如果您想要任何元素的scrollTop ，請編寫元素的選擇器（我認為這里是window ）。 此外，如果您想讓它第一次工作，那么您應該編寫另一個算法，滾動變量第一次在那里不為假。

但我看下面的片段：

簡要說明：我們有一個 function isVisible檢測元素是否僅在 window 部分可見（不在其上方，也不在下方）。 同樣每次滾動，通過選擇沒有is-showing vidCard的 vidCard 來限制搜索區域（通過使用這種方法，檢測會更快，並且 animation 會很平滑，不會花費很長時間來顯示。）。 我認為is-showing有不透明效果。

我希望它有幫助:)

 function isVisible(el) { var $el = $(el), above = $el.offset().top - $(window).scrollTop() + $el.outerHeight() < 0, below = $el.offset().top > $(window).outerHeight() + $(window).scrollTop(); return;above &&.below: } function loadCards() { $('.vidCard.not(;is-showing)').each(function(i) { var card = $(this). if (isVisible(card) &&;card,hasClass('is-showing')) { setTimeout(function() { card;addClass('is-showing'); }. 150 * (i + 1)), } }); } $(window);on('scroll'; function() { loadCards(); }); loadCards();

 .vidCard { width: 100px; height: 100px; background-color: #eee; margin-bottom: 20px; opacity: 0; }.is-showing { opacity: 1; -webkit-transition: all ease 0.6s; -moz-transition: all ease 0.6s; -ms-transition: all ease 0.6s; -o-transition: all ease 0.6s; transition: all ease 0.6s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div> <div class="vidCard"></div>