scroll html5無效怎么解決

本文小編為大家詳細介紹“scroll html5無效怎么解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“scroll html5無效怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

　　1、移動端 我們通常采用三段式進行布局的? 例如

　　可是有的人就會發現有時滾動效果沒有作用對吧 嘿、此時第一個注意問題就來了 加載better-scroll的元素只能有一個直屬子元素 也就是

　　這種形式 并且content這層盒子不能給固定高度? 當content的高度大于外層main這個盒子后better-scroll就會生效

　　2、然后第二點就是今天的重頭戲 吸頂效果了

　　相信用過這款插件的就會知道我們的滾輪在這里是沒有作用的 這也意味著onscroll事件不能使用了 那吸頂效果該如何去做才好呢? ? 在better-scroll中給我們提供了這樣一個方法? bs.on("scroll",function(e){})? 此時的e能夠打印出一個關于滾動產生的x y 對象? 注意這個方法要想生效我們需要在? 這個bs對象中添加probetype這個屬性 寫法如下

　　let bs=new bscroll("main",{

　　probetype:2

　　})

　　然后到了這里就有人會說那我們既然能夠得到y值那豈不是可以 利用以前的方法 我們給需要吸頂的元素添加一個關于固定定位的class類名就可以對吧? ?然后此時又引出了better-scroll的另一個巨坑了

　　fixed定位的元素，如果父級有transform樣式，值不為none，那么fixed定位就會失效，scale(),rotate()都會使fixed定位失效。? 所以說我們在使用better-scroll事件的盒子里會造成我們的絕對定位失效 從而導致我們的吸頂效果失敗? ? ?于是本人想出另外一個比較low的方法可以模擬吸頂效果? ?我們同樣可以在scroll這個方法中克隆一下這個需要吸頂的盒子然后 在通過e.y值在達到我們想要的高度時動態添加給除了main任何一個地方? 注意這里一定不要加給main? ?然后在通過絕對定位定在想要位置? 不想要的位置再刪除? 這里刪除的時候需要判斷是否添加上? ?添加的時候注意不要多次添加！！！

　　3、點擊事件失效問題

　　在引用了這個插件后這個盒子內部的元素會出現點擊事件失效問題? 此時我們需要在bs那個對象中放上這個屬性? click:true

　　4、? 返回頂部操作問題

　　前面說過引入了這個插件后onscroll事件就不會被觸發了 那么代表scrolltop也就沒有作用了? 那么返回頂部操作我們應該怎么辦呢

　　此時better-scroll事件里面有一個方法 bs.scrolltop(0,0,1000) 這個方法可以讓我們返回頂部? 0,0是返回0，0點位置 第三個參數是返回所用的時間長短

　　5、上拉加載效果 和 下拉刷新

　　這里給大家簡單介紹幾個api的使用

　　1 let bs = new bscroll("main", {

　　2 pullupload: true,//上拉

　　3 pulldownrefresh: true,//下拉

　　4 //也可以寫成對象模式

　　5 //注意上拉不支持

　　6 // pulldownrefresh:{

　　7 // //下拉到一百的位置才會觸發

　　8 // threshold:100,

　　9 // //然后松手后返回50的位置

　　10 // stop:50,

　　11 // }

　　12 })

　　13

　　14 bs.on("pullingdown", function () {

　　15 //"pullingup 上拉"

　　16 console.log("下拉刷新");

　　17 //這個事件開始告訴瀏覽器開始下拉刷新了

　　18 //然后進行一些數據的請求

　　19

　　20 //當數據請求過來后

　　21 //告訴瀏覽器下拉結束

　　22 bs.finishpullup();//上拉結束

　　23 bs.finishpulldown();

　　24 //dom結構發生改變后可以刷新下

　　25 bs.refresh()

　　26 })

讀到這里，這篇“scroll html5無效怎么解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。