jQuery实现初始化时滚动条在最底部

在移动端H5中,为了禁止iPhone页面下拉并允许局部滚动,对id为introPage的div应用滚动条初始化在底部。方法一是直接使用scrollTop(),在大部分手机上有效,但不适用于iPhone6。为解决此问题,采用方法二,通过动画方式让滚动条平滑滚动到底部,实现了兼容性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

此功能应用在移动端的一个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);

以动画的方式使该区域滑动到底部。经过测试,此方法可以起效。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值