移动端获取页面滚动条距离顶部的距离，以及拖动惯性问题

最新推荐文章于 2026-03-27 09:45:13 发布

原创最新推荐文章于 2026-03-27 09:45:13 发布 · 2.1w 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

本文探讨了在移动端如何获取页面滚动条距离顶部的距离，并详细讲解了处理滚动拖动惯性的问题，主要关注于jQuery的实现方法。

	document.getElementsByTagName('section')[0].addEventListener('touchmove',function(e){
		console.log("开始滑动了touchstart");
		let a = document.documentElement.scrollTop;
		console.log("滑动距离为：",a);
	});

jquery

	sectionDom.on("touchmove",function () {
		console.log("触摸滚动1")
		let scroll = $(document).scrollTop();

	});

   //touchmove  手指不放发生
        $('body').on('touchmove',function(){
            $('.sob').css({'display':'none'})  //隐藏div
        })
               //touchend   手指放开发生
        $('body').on('touchend',function(){
            $('.sob').css({'display':'initial','position':'fixed'})  //显示，固定div
        })

// 滑动滚动条
$(window).scroll(function(){
// 滚动条距离顶部的距离 大于 200px时
if($(window).scrollTop() >= 200){
$(".scroll_top").fadeIn(1000); // 开始淡入
} else{
$(".scroll_top").stop(true,true).fadeOut(1000); // 如果小于等于 200 淡出
}
});

拖动惯性


            惯性原理:
            产生的速度 = 移动距离 / 移动时间
            距离 = 松开的坐标 - 上次的坐标  (距离差)
            时间 = 松开的时间 - 按下的时间  (时间差)



//拖动

    var slide = document.querySelector('.header .h-nav'),
        nav = document.querySelector('.header .nav'),
        // 开始的偏移
        startX = 0,
        // 保存的偏移
        translateX = 0,
        // 手指坐标
        startFinger = 0,
        maxWidth = nav.offsetWidth - slide.offsetWidth,
        lastTime = 0; //按下的时间
    console.log(maxWidth);
    slide.addEventListener('touchstart',function (e) {
        e.stopPropagation();
        startFinger = e.changedTouches[0].clientX;
        nav.style.WebkitTransition = nav.style.transition = '';
        startX = translateX;
        lastTime = Date.now();
        console.log(lastTime);
    });
    slide.addEventListener('touchmove',function (e) {
        e.stopPropagation();
        var nowFinger = e.changedTouches[0].clientX,
            distance = nowFinger - startFinger;
        translateX = distance + startX;
        // 弹性
        if(translateX > 0 ){ //拖动系数. 拉力的感觉
            translateX *= 0.4;
        }else if( translateX < -maxWidth){  //最后.
            translateX = distance*0.4 + startX;
        }
        shift(translateX);
    })
    slide.addEventListener('touchend',function (e) {
         /*
            惯性原理:
            产生的速度 = 移动距离 / 移动时间
            距离 = 松开的坐标 - 上次的坐标  (距离差)
            时间 = 松开的时间 - 按下的时间  (时间差)
         */
        var nowFinger = e.changedTouches[0].clientX,
            distance = nowFinger - startFinger,  //距离差
            timeDis = Date.now() - lastTime,  //时间差
            speed = (distance / timeDis)*100;
        console.log(speed);  //很小 *倍数
        // 惯性
        translateX += speed;

        // 边界 ,弹回去
        if(translateX > 0){
            translateX = 0;
        }else if(translateX < -maxWidth){
            translateX = -maxWidth;
        }
        // 添加贝塞尔曲线
        nav.style.WebkitTransition = nav.style.transition = 'transform 500ms cubic-bezier(0.1, 0.57, 0.1, 1)';
        shift(translateX);
    })
    function shift(value){
        nav.style.WebkitTransform = nav.style.transform = 'translateX('+value+'px)';
    }