1. 程式人生 > >jQuery實現初始化時滾動條在最底部

jQuery實現初始化時滾動條在最底部

此功能應用在移動端的一個h5上。首先為了禁止在iphone上頁面下拉露出黑底,同時頁面內部可以區域性滾動,需要如下操作:

$(function(){
    document.body.ontouchmove = function (e) {
        e.preventDefault();
    };

    var startX = 0, startY = 0;
    //touchstart事件  
    function touchSatrtFunc(evt) {
        try
        {
            //evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等  
var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X座標 var y = Number(touch.pageY); //頁面觸點Y座標 //記錄觸點初始位置 startX = x; startY = y; } catch (e) { alert('touchSatrtFunc:' + e.message); } } document.addEventListener('touchstart'
, touchSatrtFunc, false); var _ss = document.getElementById("introPage");//允許滾動的區域 _ss.ontouchmove = function (ev) { var _point = ev.touches[0], _top = _ss.scrollTop; // 什麼時候到底部 var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight; // 到達頂端 if (_top === 0
) { // 阻止向下滑動 if (_point.clientY > startY) { ev.preventDefault(); } else { // 阻止冒泡 // 正常執行 ev.stopPropagation(); } } else if (_top === _bottomFaVal) { // 到達底部 // 阻止向上滑動 if (_point.clientY < startY) { ev.preventDefault(); } else { // 阻止冒泡 // 正常執行 ev.stopPropagation(); } } else if (_top > 0 && _top < _bottomFaVal) { ev.stopPropagation(); } else { ev.preventDefault(); } }; })

id為introPage的div即為可以滾動的區域。除此之外,在頁面初始化之後,$(“#introPage”)需要滾到至底部,此時需要應用到scrollTop()方法。

方法一:

$('#introPage').scrollTop($('#introPage')[0].scrollHeight);

經測試,除了iPhone6,此方法在其他手機上都能起效,原因不詳~~
因此,為了相容iPhone6,使用瞭如下的方法:

方法二:

$('#introPage').animate({scrollTop: $('#introPage')[0].scrollHeight}, 800);

以動畫的方式使該區域滑動到底部。經過測試,此方法可以起效。