2014-05-13 32 views
4

我正在玩Skrollr,大部分它看起來非常直觀,那種讓我感到的是數據錨定目標屬性。大多數時候我不需要它,但是當我看到一些例子時,它通常包含在內,我對它的功能感到困惑。這是否意味着在那個目標下,Skrollr數據(pos)屬性起作用了?數據錨定目標究竟做了什麼?

+4

我認爲這個示例是自我解釋的http://prinzhorn.github.io/skrollr/examples/anchor_target.html – Prinzhorn

+0

讓我知道如果我錯了prinzhorn,但它基本上意味着你添加到子元素的所有數據屬性都與數據目標有關 – artSir

回答

3

data-anchor-target當使用Skrollr.js時,通常使用兩種方法作爲輸入一個用於開始和停止滾動控件:

  1. 絕對定位,與開始或 整個文檔的結束。
  2. 相對定位,與頂部 查看瀏覽器框架的底部或中心相關。

data-anchor-target標記使開發人員可以自由使用替代元素來觸發修改。您將控制位置直接放置在文檔中。元素通過簡單的CSS選擇器(.class或#id's)標識到目標標籤。當data-anchor-target標記元素滾動到查看窗口中時,開發人員可以使用標準相對模式data-bottom-top標記來啓動所需的滾動結果。使用data-top-bottom作爲數據錨點目標何時向上滾動並離開查看窗口的控件。記住這個圖像?

pictorial

這是涼爽的方式,因爲這使得能夠針對不同的觀看設備,取向和屏幕尺寸完善的控制。看看anchor-target.html示例。請注意,無論何時,只要框中可見紅臉,藍臉就會笑起來。 (注意:不要被該示例中的!0 CSS標識符嚇倒。請記住,在滾動條中,!感嘆號用於固定滾動期間修改的數字字段。)