translate3d模拟滚动条

最新推荐文章于 2025-07-17 11:20:52 发布

原创最新推荐文章于 2025-07-17 11:20:52 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#移动 #高性能 #html #3d #gpu

HTML+CSS 同时被 2 个专栏收录

10 篇文章

订阅专栏

js+jq

6 篇文章

订阅专栏

本文介绍了一种使用translate3d替代原生scroll的方法，通过实例展示了如何实现流畅的滚动效果，并提高了移动端网页应用的性能。

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

做移动端页面，通常是不用原生的scroll,而是用translate3d来模拟，原因主要是原生的scroll对移动端的支持并不是很好，样式也不好看（有滚动条出现），用translate3d来模拟还可以调用GPU来加速，提高性能。

html:

   <div class="wrap">
        <div id="listContent">
                <ul id="listContentUl">
                    <li style="background: hotpink; height: 50px">我是header</li>
                    <li style="background: yellowgreen; height: 600px">我是content</li>
                    <li style="background: aqua; height: 50px">我是footer</li>
                </ul>
        </div>
    </div>

css:

        * {
            margin: 0;
            padding: 0;
        }
        html，body{ 
            width:100%; 
            height:100%; 
        }
        body {
            background: grey
        }
        .wrap {
            margin: 100px auto 0;
            width: 400px;
            height: 500px;
            border: 1px solid #000;
            font-size: 30px;
        }
        #listContent {
            position: relative;
            width: 400px;
            height: 500px;
            overflow: hidden;
        }
        #listContentUl { 
            position:absolute; 
            top:0; 
            left:0; 
            transform:translate3d(0,0,0);
        }
        #listContentUl li{ 
            list-style:none; 
            width: 400px;
            height: 80px;
            border-bottom: 1px solid grey;
        }

js(基于jQuery):

$(function (){

            var viewWidth = $(window).width();
            var viewHeight = $(window).height();
            var desWidth = 640;
            var touchstart = 'touchstart';
            var touchmove = 'touchmove';
            var touchend = 'touchend';

            var $listContent = $('#listContent');
            var $listContentUl = $('#listContentUl');            

            var downY = 0;
            var prevY = 0;
            var downT = 0;
            var parentH = $listContent.height();
            var childH = $listContentUl.height();
            var onoff1 = true;
            var onoff2 = true;
            var timer = null;
            var speed = 0;

        function device(){  
            var isMobile = /Mobile/i.test(navigator.userAgent);
            if(viewWidth > desWidth){
                $listContent.css('width','640px');
            }
            if(!isMobile){
                touchstart = 'mousedown';
                touchmove = 'mousemove';
                touchend = 'mouseup';
            }
        }

        function moveScroll(){   
            $(document).on(touchmove,function(ev){
                ev.preventDefault();       //苹果手机滑动时 整个页面都滑动，阻止其默认事件
            });        
            $listContentUl.on(touchstart,function(ev){
                if(parentH > childH){return false;}
                var touch = ev.originalEvent.changedTouches ? ev.originalEvent.changedTouches[0] : ev;
                var This = this;
                downY = touch.pageY;
                prevY = touch.pageY;
                downT = $(this).position().top;
                onoff1 = true;
                onoff2 = true;
                clearInterval(timer);
                $(document).on(touchmove+'.move',function(ev){
                    var touch = ev.originalEvent.changedTouches ? ev.originalEvent.changedTouches[0] : ev;
                    var iTop = $(This).position().top;

                    speed = touch.pageY - prevY;
                    prevY = touch.pageY;

                    if(iTop >= 0){   
                        if(onoff1){
                            onoff1 = false;
                            downY = touch.pageY;
                        }
                        $(This).css('transform','translate3d(0,'+(touch.pageY - downY)/3+'px,0)');
                    }
                    else if(iTop <= parentH - childH){  
                        if(onoff2){
                            onoff2 = false;
                            downY = touch.pageY;
                        }
                        $(This).css('transform','translate3d(0,'+((touch.pageY - downY)/3 + (parentH - childH))+'px,0)');
                    }
                    else{
                        $(This).css('transform','translate3d(0,'+(touch.pageY - downY + downT)+'px,0)');
                    }

                });
                $(document).on(touchend+'.move',function(){
                    $(this).off('.move');

                    clearInterval(timer);
                    timer = setInterval(function(){
                        var iTop = $(This).position().top;
                        if(Math.abs(speed) <= 1 || iTop > 50 || iTop < parentH - childH - 50){
                            clearInterval(timer);
                            if(iTop >= 0){
                                $(This).css('transition','.2s');
                                $(This).css('transform','translate3d(0,0,0)');
                            }
                            else if(iTop <= parentH - childH){
                                $(This).css('transition','.2s');
                                $(This).css('transform','translate3d(0,'+(parentH - childH)+'px,0)');
                            }
                        }
                        else{
                            speed *= 0.9;
                            $(This).css('transform','translate3d(0,'+(iTop + speed)+'px,0)');
                        }

                    },13);

                });
                return false;
            });
            $listContentUl.on('transitonend webkitTransitionEnd',function(){
                $(this).css('transition','');
            });
        }

            device();
            moveScroll();