translate3d模拟滚动条

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

做移动端页面,通常是不用原生的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>

Jetbrains全家桶1年46,售后保障稳定

css:

        * { margin: 0; padding: 0; }
        htmlbody{ 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();

pc端:
这里写图片描述

移动端:
这里写图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/215883.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 数据连接建立流程_数据对接方式

    数据连接建立流程_数据对接方式数据连接建立流程

  • IP地址,子网掩码、默认网关,DNS服务器是什么意思?

    IP地址,子网掩码、默认网关,DNS服务器是什么意思?IP地址,子网掩码、默认网关,DNS服务器是什么意思?IP地址,子网掩码、默认网关,DNS服务器是什么意思?(一)问题解析001.问:IP地址,子网掩码,默认网关,DNS服务器,有什么区别呀?我知道没有IP地址就不能上网,我也知道没设DNS就不能上外网,可它们都有什么功能,有什么区别呢?还有真奇

  • jboss安装与配置_andrax安装出错

    jboss安装与配置_andrax安装出错一.              下载与安装JBoss在本文中,我们下载的JBoss版本为:4.2.1.GA。下载地址:http://www.jboss.org/jbossas/downloads/在如上的下载页中下载JBoss-4.2.1.GA.zip文件。下载完成后,将其解压缩后即可完成安装,解压缩后将其放置到一个不带空格的目录(若目录带有空格,例如:C:

  • date函数

    date函数

    2021年10月31日
  • 时滞模型的matlab编程_如何用matlab仿真

    时滞模型的matlab编程_如何用matlab仿真Matlab仿真含时滞多智体一致性分析,附代码Matlab仿真含时滞多智体一致性分析,附代码Matlab仿真含时滞多智体一致性分析,附代码系统结构如下图所示:clear;clc;%2014_多智能体网络的一致性问题研究_纪良浩%此为Paper中的示例代码%例2.1:A=[0,0,0.1,0,0;0.1,0,0,0,0;0,0.15,0,0…

  • 闭包及作用域销毁练习

    闭包及作用域销毁练习闭包及作用域销毁练习题vari=1;functionfn(i){returnfunction(n){console.log(n+(++i))}}varf=fn(2);f(3);fn(5)(6);fn(7)(8);f(4)//输出打印结果(把下面的html复制到本地打开就有此题详解)//…

    2022年10月11日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号