jQuery實現初始化時滾動條在最底部
阿新 • • 發佈:2019-01-07
此功能應用在移動端的一個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);
以動畫的方式使該區域滑動到底部。經過測試,此方法可以起效。