查找Dojo中的視口中的哪些元素

我想在用戶滾動併到達某個元素時觸發一個函數，以便我可以將該元素標記爲「讀取」（想想帖子如何標記後讀取在現在不存在的Google閱讀器中查看它們）。因此，舉例來說，想像類似下面的頁面：查找Dojo中的視口中的哪些元素

<div id="1">Node 1</div> 
<div id="2">Node 2</div> 
<div id="3">Node 3</div> 
<div id="4">Node 4</div>

假設只有在視口中前兩個<divs>配合，我想使用Dojo的事件監聽器和觸發事件Div時3映入眼簾，再當div 4進入視野時。（除了我讀取元素時的錄製目標外，這也可以讓我輕鬆實現無限滾動。）

jQuery Waypoints工具似乎正是我想要的，但由於我的大部分代碼都使用Dojo ，我真的不想只爲這一個任務使用jQuery。我希望找到一個預編寫的工具或簡單的方法來完成這個工作，它不依賴於庫/工具包其他而不是Dojo（我完全可以使用Dojo或根本沒有庫）。

UPDATE：看來Skrollr也做什麼，我在尋找，但僅限於動畫 - 也就是說，它可以激活基於其視關係的元素。但這並不完全有幫助，因爲我的目標不是動畫，而是在元素進入視點時激活一個函數（這將通過Dojo進行AJAX調用）。

來源

2013-07-03 Timothy R. Butler

感謝一位朋友的指點，我能夠爲這個問題提供一個功能性解決方案。假設所有的div都在id文章的另一個div內，當用戶將至少50px的元素底部滾動到視口中時，然後對該元素應用「讀取」類。

posts = dojo.query("#articles > div"); 

    dojo.connect(window, 'onscroll', function(){ 
     var vs = win.getBox(); 

     var output; 
     var readCount; 

     for (var i = 0; i < posts.length; i++) { 
      var includeScroll = false; 
      var locInfo = domGeom.position(posts[i], includeScroll) 
      var fullyOnScreen = locInfo.y + locInfo.h + 50; 
      if ((fullyOnScreen > 0) && (fullyOnScreen < vs.h)) { 
       //Apply "read" class to div if it has been scrolled to. 

       domClass.add(posts[i], "read");    
      } 
      if (locInfo.y > vs.h) { 
       break; 
      } 
     } 


    });

剩下的問題：雖然這解決了我的目標，我不知道它是最有效的輪詢每一次或視上述每一個div的位置，用戶滾動 - 即使每次滾動多次事件。有沒有辦法讓這個更高效？它似乎在我的Core 2 Duo系統上運行正常，但我並不想因爲它看起來不那麼渺茫。

我想過在啓動時計算絕對頂部的所有div的位置，然後每次滾動時在視口和頂部之間進行一些比較。這可能會更有效率，但我不確定效率是否會增加代碼的複雜度。

來源

2013-07-04 19:53:48

查找Dojo中的視口中的哪些元素

回答

相關問題