這個需求有點意思,拿出來和你們分享一下。
若是你去實現過這樣的效果,或者相似這樣的效果的,你會發現簡單去 一欄控制另外一欄的的滾動距離,另外一欄相似控制第一欄的效果的話。你會發現基本上可能滾動不了,優化以後經過函數節流,等其餘手段優化以後也是很卡,滾動會不流暢。
緣由主要是由於當你改變一個元素的scrollTop 或者 scrollLeft值的時候這個時候會觸發scroll事件,這樣兩邊一種循環調用~就會滾動不了。
其實只須要把這個須要細分以後,就能夠流暢的實現這個效果。
首先清楚一件事 頁面內元素滾動須要鼠標到底元素裏面而後再滾動纔會有效,明白這一點以後,這一切就會簡單不少了。函數
而後你只須要去控制 監聽和解除監聽 滾動的函數的函數就能夠完美實現這個效果了。優化
demo待續。。。歡迎交流事件