手機端滾動頁面到一定程度出現特效
手機端不支援監聽滾動的距離(慣性滾動的距離),因此可使用下面的方式來實現:當滑動手機頁面到一定程度時,實現某些特效。
思路:
- 定義一個變數記錄所要滑動的最大距離
- 利用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 <div @scroll.stop.prevent> 你要顯示的內容 </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