国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

我對滾動消息的理解之scrollTop

Honwhy / 2474人閱讀

摘要：單條消息的滾動顯示只是把相框的高度設成單條消息的高度了，這樣每拖動一條消息的高度，我們就只看到一條消息了。滾動的其他原理就不提了，這里只說說我對到底是如何實現滾動的理解。

???????作為前端的初學者我前天學到了如何用JavaScript中的scrollTop來實現消息滾動效果。消息的向上滾動實際上可以看做是我們把相框里面的照片給向上拖動，我們能看到的消息就只有相框里面的部分。單條消息的滾動顯示只是把相框的高度設成單條消息的高度了，這樣每拖動一條消息的高度，我們就只看到一條消息了。滾動的其他原理就不提了，這里只說說我對scrollTop到底是如何實現滾動的理解。
???????下面先貼上代碼:

???????這里的area就是我前面說到的“相框”，con1和con2就是嵌在里面的“照片”。注意：調用scrollTop的是area，因為我們要動的東西是“相框”里面的內容。這段代碼里面最重要的就是理解它到底是怎么實現循環滾動的。其中的關鍵就是復制語句和置零語，下面上圖：


圖1（ps：黑色框為area，紅色框為con1）就是“相框”內的內容向上滾動到底就停止滾動了，即使繼續增加area.scrollTop它也不會動，那我們就會想讓它回到初始位置再重新向上滾動。就是變成下面這樣：

圖2就是我們消息滾動的初始狀態，但是如果直接從圖1跳到圖2，我們的消息滾動就會變得不連貫，看著不舒服。怎么解決這個問題？那就用到了復制語句。
???????復制的內容con2和原內容con1一樣，只是位于con1之后，關系如下圖：


（ps:藍色框為復制的con2）復制內容有什么用？接著往下看：

這一刻就是關鍵時刻，這個時候我們解決了圖1中出現的尷尬局面，紅色框可以繼續向上滾動，因為框內的內容還沒到底，而此時內容已經開始循環了，因為藍色框的內容和紅色框的內容一樣。那這個時候我們再把紅色框拿回到初始位置即把scrollTop置零，變回圖3的狀態（因為紅色框和藍色框都是黑框的內容，所以如果改變scrollTop的值，他們的位置會一起變化）。因為紅色框和藍色框頂部的內容一樣，即使回到初始狀態你也看不出來中間變化的過程。
（ps:如果有不明白具體是怎么實現的請看教程，信息滾動效果制作！）

???????第一次寫這個，如有不足請多指教！謝謝！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78878.html

相關文章

  • 【前端詞典】滾動穿透問題的解決方案

    摘要：接下就說下我對滾動穿透問題解決方案探索的過程，希望對大家有點啟發。心想來了突然意識到寫彈窗的時候忘記處理滾動穿透的問題了。下期預告前端詞典繼承必懂知識點傳送門前端詞典代理的概念及其應用前端詞典滾動穿透問題的解決方案 背景 產品有三寶，彈窗，浮層加引導； 設計有三寶，透明，陰影加圓角； 運營有三寶，短信，推送加紅包； 程序員有一寶，這個做不了。 隨著移動端市場的份額越大，需求就越多...

    _Dreams 評論0 收藏0

  • 【前端詞典】滾動穿透問題的解決方案

    摘要：接下就說下我對滾動穿透問題解決方案探索的過程，希望對大家有點啟發。心想來了突然意識到寫彈窗的時候忘記處理滾動穿透的問題了。下期預告前端詞典繼承必懂知識點傳送門前端詞典代理的概念及其應用前端詞典滾動穿透問題的解決方案 背景 產品有三寶，彈窗，浮層加引導； 設計有三寶，透明，陰影加圓角； 運營有三寶，短信，推送加紅包； 程序員有一寶，這個做不了。 隨著移動端市場的份額越大，需求就越多...

    mzlogin 評論0 收藏0

  • js移動端滑倒頂部加載歷史消息解決方案!

    摘要：使用具有回彈效果的滾動當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。 最近做了一個語音直播聊天的項目，有一個功能是當沒有直播時，進入房間可以查看歷史消息，滑動到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動到頂部，問題來了： 首先觸發請求事件之后，prepend插入到當前列表之前，而prepen...

    jackwang 評論0 收藏0

  • js移動端滑倒頂部加載歷史消息解決方案!

    摘要：使用具有回彈效果的滾動當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。 最近做了一個語音直播聊天的項目，有一個功能是當沒有直播時，進入房間可以查看歷史消息，滑動到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動到頂部，問題來了： 首先觸發請求事件之后，prepend插入到當前列表之前，而prepen...

    mingde 評論0 收藏0

  • js移動端滑倒頂部加載歷史消息解決方案!

    摘要：使用具有回彈效果的滾動當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。 最近做了一個語音直播聊天的項目，有一個功能是當沒有直播時，進入房間可以查看歷史消息，滑動到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動到頂部，問題來了： 首先觸發請求事件之后，prepend插入到當前列表之前，而prepen...

    leejan97 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<