1. 程式人生 > >手機端滾動頁面到一定程度出現特效

手機端滾動頁面到一定程度出現特效

手機端不支援監聽滾動的距離(慣性滾動的距離),因此可使用下面的方式來實現:當滑動手機頁面到一定程度時,實現某些特效。

思路:

  • 定義一個變數記錄所要滑動的最大距離
  • 利用setInterval(function(){},1)。

解釋為什麼要使用setInterval()定時器。

  • 進行實時的比較:由於手機端的不支援監聽慣性滾動距離,所以我們需要實時的獲取scrollTop,從而將scrollTop與所記錄的滑動最大記錄進行比較

具體程式碼

setTimeout(function(){
    var firstHeight = $('.section_one').height()
    var
secondHeight = $('.section_two').height() var thirdHeight = $('.section_three').height() var fourHeight = $('.section_four').height() var allHeight = firstHeight + secondHeight + thirdHeight + fourHeight/3 var timer = setInterval (function(){ console.log('這是allHeight:' + allHeight) console.log('這是滾動的:'
+ $(window).scrollTop()) if ($(window).scrollTop() >= allHeight) { clearInterval(timer) $('.section_five .con_img').animate({'transform': 'translateY(0%)'},600) $('.section_five .con_desc').animate({'transform': 'translateY(0%)'},600) } },500) },1);

相關推薦

手機滾動頁面一定程度出現特效

手機端不支援監聽滾動的距離(慣性滾動的距離),因此可使用下面的方式來實現:當滑動手機頁面到一定程度時,實現某些特效。 思路: 定義一個變數記錄所要滑動的最大距離 利用setInterval(function(){},1)。 解釋為什麼要使用setInt

滾動頁面一定距離後固定導航條

函數 chm 固定 spa container off logs cti 文檔流 需求:滾動頁面到一定距離後,頁面中間的導航條固定到頁面的某個位置不動,滾回去時會復原。 document.addEventListener(‘scroll‘, function (event

微信手機禁止頁面上下滑動

rip 解決 內容 監聽 OS 有時 解決辦法 lis tde 做微信手機端開發,有時候頁面內容一屏就能顯示下,這樣的情況下就不需要頁面能上下滑動,解決辦法記錄如下: 安卓手機:只需添加樣式即可: body, html {   position: fixed;   top

手機h5頁面利用rem進行適配的有效方案

關於H5頁面的適配方案,有很多很多,各種方法有各種方法的優勢。在博主做專案的實際開發過程中,常用的方案是利用rem進行適配。具體的適配原理如下: 需要明確的一點,各種瀏覽器對字型預設的大小為16px. 通常UI設計師給到前端開發的設計稿是以iphone6 手機大小設計的,前端開發時也是參照i

mui+vue微信版前後分離手機登入頁面佈局和呼叫資料

第一步:頁面效果圖如下,是一個很常用的頁面 第二:程式碼如下,頁面非常少,沒有用webpack和vue-li,用了最原始的方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

rem、px、em(手機h5頁面螢幕適配的幾種方法)

px px畫素(pixel):相對長度單位。相對於顯示器螢幕解析度而言。pc端使用px倒也無所謂,可是在移動端,因為手機解析度種類頗多,不可能一個個去適配,這時px就顯得非常無力,所以就要考慮em和r

關於手機滾動載入更多多次觸發事件問題

在做手機端滾動載入更多時,因為滾動是一個持續過程,所以就導致了會一次或很短時間內觸發多次ajax請求,  可以設定一個全域性變數控制.// bool變數, 用於阻止滾動到底部連續觸發多次  let isBottom = trueconst scrollHeight = ele

手機滾動分頁載入資料模型

說明:執行demo的時候請將瀏覽器模式調整到蘋果5 <!DOCTYPE html> <html lang="en"> <head> <meta

解決手機自適應頁面出現 X軸滾動條問題

最近在用 Bootstrap 寫一個需要適配 WEB 和 WAP 的網站,寫完後發現 WAP 端總是會出現橫向滾動條,也就是 X 軸滾動條,導致 WAP 端頁面左右滑來滑去,很是令人蛋疼,即使設定了 overflow-x: hidden 也無法去除,通過各種途徑尋找解決方法,最終在 張鑫

在網頁中能正常顯示的頁面,在手機出現問題?

只需要在頁面的head中加上如下程式碼即可: <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,use

跳出彈窗頁面禁止滾動(PC手機

pc端如何實現 1.當彈窗顯示時,為body元素新增屬性:overflow:hidden, 當關閉彈窗時移除該屬性即可2.在彈窗的div上設定 @scroll.stop.prevent &lt;div @scroll.stop.prevent&gt; 你要顯示的內容 &lt;/d

ionic中<ion-scroll>設置為左右滾動,蘋果手機觸摸到此標簽上時無法上下滾動內容

direct lin 滾動 direction eat lists -s over hidden ionic中<ion-scroll>設置為左右滾動,蘋果手機端觸摸到此標簽上時無法上下滾動內容。 如下代碼: <ion-scroll direction="x

PC變成手機的時候,把特效去掉(把canvas標簽去掉)

window 方法 spa color win css display screen span PC端變成手機端的時候,把特效去掉(把canvas標簽去掉)<script> if (screen.width < 768){ $(‘can

手機頁面自適應解決方案—rem布局

syn posit var cells document false 為什麽 gin element 只需在頁面引入這段原生js代碼就可以了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 (function (doc

兼容手機頁面

手機端 fonts ati maximum style 頁面 view pixel port (function(){var iScale = 1;iScale = iScale / window.devicePixelRatio;document.write(‘<m

手機頁面,隱藏虛擬鍵盤

log back code readonly 隱藏鍵盤 col 焦點事件 class 自動彈出 原生js中沒有方法來控制手機虛擬鍵盤的隱藏與顯示,當輸入框得到焦點時會自動彈出虛擬鍵盤,很多時候頁面已經滾動到別處了,鍵盤應該隱藏了,可鍵盤還是沒收回,這時候可用個變通的辦法了隱

【微信小程序】解決 豎向<scroll-view>組件 “豎向滾動頁面出現遮擋”問題

ane -c system cti cnblogs con ons 原因 strong 問題圖: 問題原因: <scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}" s

rem手機頁面自適應完美解決方案(最新)

有效 load rem tex width meta sel setattr name <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

rem手機頁面自適應布局(待修正下一篇完美布局)

ans 手機頁面 元素 blog 底部 max cli chang 都是 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met

織夢系統-手機搜索頁面跳轉到電腦問題解決方法

numeric name inpu 電腦 使用 sea 顯示 spa 童鞋 使用dedecms最新程序移動版的童鞋如果遇到,手機版搜索結果跳轉到的是電腦版搜索結果頁面去; 解決方法 移動版模板搜索代碼中要帶有(下面標紅的代碼) <form name="formsear