台灣最大程式設計社群網站
線上人數
1796
 
會員總數:246570
討論主題:190029
歡迎您免費加入會員
討論區列表 >> Java Script/ Node.js >> scroll位置與offset之間的關係
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
scroll位置與offset之間的關係
價值 : 50 QP  點閱數:874 回應數:2
樓主

azureshin
初學者
20 143
1575 72
發送站內信

各位好

http://lucien.mobi/demo.html
直接上網址....


每個灰框上面的數字,是自己的offset().left

滾動橫向捲軸時,會輸出捲軸的scrollLeft()

想問的是....

Q1. 為何scrollLeft()滾到任一灰框底下時,顯示的數字跟灰框上的數字落差會那麼大?
照理說應該要差不多?
應該會offset.left跟scrollleft都是從左邊開始計算.

Q2. 其實我想做的是,捲軸滾到某一灰框底下時, 那灰框就變色.
目前思路是...
scrollstop時, 每個灰框都loop一次, 只要灰框位置 >= 捲軸位置
就變色,並return false.

這樣思路應該沒錯吧!!??? 還是有更便捷方式??

搜尋相關Tags的文章: [ scroll ] ,
本篇文章發表於2016-11-09 12:17
1樓
回應

Daimom
捐贈 VP 給 Daimom 檢舉此回應
請看定義
offset
scrollleft

當你捲軸的數字顯示為119的時候 你可以看一下會顯示哪個灰框

本篇文章回覆於2016-11-10 11:25
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
最有價值解答

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
其實,你要注意的是。是否有margin、padding跟border

scrollleft內部不會有這些東西存在。所以會是實際一長度。
但offset().left。指的是目前該物件的對應存值。但其中的margin、padding跟border掛入的偏移值都會算進去。
也就是說。當你margin:5px的情況下。在捲軸為0時。其div就已經會存在有5px的偏移值了。

你可以做一下實驗,也就是將上面說的三個值都先設為0。就應該會得到相同的值出現了

一般要利用捲軸來做loop的處理。你不該用scrollleft跟offset().left來做比對。
畢竟在排版上,多少會有加入一些額外的東西進去。
正確的做法是直接去計算單純的div的offset().left是否已經為0了就好。無需跟scrollleft來做比對處理。

換另外一種思考了。
你不覺得有一件事很奇怪嗎??
你的div有16個。每個都有100的width。正常也只有1600的寬度。為何最後一個會是1715呢?

然後~~~scrollleft捲到底時。只有1320??為何呢??

我大約給你解析一下。
實際上你的總容器寬度是在1820

推算的方式也很單純。
用你的div推算的話。我抓最後一個偏移值1715來計算
則 1715+100(本身的容器寬度)+5(margin右值,因為左值已經計算在內了) = 1820

再用捲軸的值計算。其到底是1320的左偏值值。還得加上主容器的可視範圍寬度500px
所以是 1320+500 = 1820

兩則計算起來其值是相同的。

也就是其總容器寬度是一樣的。(不一樣就慘了)

但因為其左偏移值的計算方式不同。因該說是因為有margin的關係。所以才會有這樣的情況發生。
你可以改用padding來試試計算。不要用margin
本篇文章回覆於2016-11-10 12:04
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.