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)
blank

相关推荐

  • k8s pod的状态为evicted

    k8s pod的状态为evictedkubectlgetpods–namespace=ingress-nginx–watch

  • vagrant up提示“Couldn‘t open file /path/to/base“的错误解决方法

    vagrant up提示“Couldn‘t open file /path/to/base“的错误解决方法

    2021年10月28日
  • 一个对话让你明白架构师是做什么的?[通俗易懂]

    一个对话让你明白架构师是做什么的?[通俗易懂]阅读本文大概需要6分钟。很多人都想知道架构师是做什么?我们看看下面的一段对话。菜鸟——刚入门的程序员老鸟——资深架构师老鸟:菜鸟,你的目标是什么?菜鸟:我要成为一个软件架构师。老鸟:对一个年轻的工程师来说,这是一个很好的目标。那你为什么要成为架构师呢?菜鸟:我要领导一个团队,还要做所有关于数据库、框架和Web服务器的重要决定。老鸟…

    2022年10月27日
  • nslookup命令的使用方法_怎么退出nslookup命令

    nslookup命令的使用方法_怎么退出nslookup命令nslookup是一款查询DNS(Internetdomainnameserver)的程序。用来网络管理工具,帮助诊断和解决DNS相关的问题。除此之外,也有其他DNS工具,如dig命令和host命令。nslookup会将DNS查询发送到指定的DNS服务器、接收DNS回复,并显示结果1、查找A记录2、查找MX记录3、查找NS记录4、查找CNAME记录5、查找SOA记录6、查找RDNSorPRT记录直接输入IP地…

    2022年10月19日
  • git merge用法详解_git merge 冲突

    git merge用法详解_git merge 冲突一、开发分支(dev)上的代码达到上线的标准后,要合并到master分支gitcheckoutdevgitpullgitcheckoutmastergitmergedevgitpush-uoriginmaster二、当master代码改动了,需要更新开发分支(dev)上的代码gitcheckoutmastergitpullgitch…

    2022年10月19日
  • executeupdate mysql_executeupdate()

    executeupdate mysql_executeupdate()关于executeupdate()的搜索结果问题JFinal1.4+druid0.2.26model.save()保存怪事?报错//方法1,用model.save()方式。privatevoidsaveClickNum(Integertype,Longclick_pkid,Integerclick_num){…爱吃鱼的程序员2020-06-2216:49:050浏览量回…

    2022年10月20日

发表回复

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

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