边栏层滚动运动缓存

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>側边滚动运动</title>
        <style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				position: absolute;
				background: green;
				right: 0px;
			}
			body {
				height: 1000px;
			}

        </style>
    </head>

    <script  type="text/javascript">
        window.onload = function() {

            document.onscroll = function() {
                var oDiv1 = document.getElementById("div1");
                var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var iClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
                var i = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2;
                //oDiv1.style.top = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px";
                // oDiv1.innerHTML = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px";
                startMove(oDiv1, parseInt(i));//paserInt是防止抖动,目标点取整
            };

            var oTimer = null;
            function startMove(obj, iTarget) {
                clearInterval(oTimer);

                oTimer = setInterval(function() {
                      //速度
                    var iSpeed = (iTarget - obj.offsetTop) /8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    //速度取整
                    if (obj.offsetTop == iTarget) {
                        clearInterval(oTimer);
                    } else {
                        obj.style.top = obj.offsetTop + iSpeed + "px";//层运动
                    };
                }, 30);
            };
        };
    </script>
    <body>
        <div id="div1">

        </div>
    </body>
</html>

版权声明:本文博主原创文章。博客,未经同意不得转载。

时间: 2024-10-20 13:30:53

边栏层滚动运动缓存的相关文章

侧边栏层滚动缓存运动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=

微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

引用:https://www.cnblogs.com/till-the-end/p/8935152.html 简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不少别人的

关于移动端js弹出层滚动的时候 body层不可滚动的解决办法

最近在做移动端网站,在点击导航栏,弹出导航列表时,出现了问题.下滑列表时底层body也跟着滚动,连查带想的折腾了两天才解决这个问题.下面主要分享一下解决办法以及关键代码. 一.有的网友建议弹出层弹出时给 html 和 body 都加上"height:100%:overflow:hidden:",然而在手机上并没有什么卵用 二.结合弹出层加上"overflow-y:auto"依然不起作用 .... 后来经过网友的帮助,结合我的代码终于找到了解决的办法 我的项目是用vu

移动端弹出层滚动穿透问题总结

移动端弹出层(简称layer)时,层内有大量文字需要滚动,但是背景层(简称body)会随着layer的滚动而滚动,用户体验较差.参考了网上的一些资料,总结解决方案如下: .scrollFix{ height: 100%; overflow: hidden; position: relative;}.scrollFix body{ height: 100%; overflow: hidden;} 弹出层前: //防止body层向下滚动后出现内容显示不全的问题$('html,body').anima

Spring AOP +EHcache为Service层方法增加缓存

在铁科院做了一个关于医保报销的项目,在这个个系统中大量使用了下拉列表框,系统主要是给机关单位使用而且都是一些干部退休了啥的,年龄都比较大不愿意自己输入东西,因此界面上的很多值都是下拉列表框从数据字典表里面加载出来. 如此以来字典表的数据量变的越来越大,在一个界面上往往需要频繁的与字典表交互,觉的很影响性能于是我们增加了缓存,即为service层中的指定方法缓存功能,具体实现是利用Spring AOP+EHcache来做. 第一次执行某个方法的时候会去数据库里面查询,当第二次执行该方法时就会去从缓

移动端js弹出层滚动的时候 body层不可滚动的解决办法

原文:https://blog.csdn.net/queenzjl/article/details/53507661 一.有的网友建议弹出层弹出时给 html 和 body 都加上"height:100%:overflow:hidden:",然而在手机上并没有什么卵用 二.结合弹出层加上"overflow-y:auto"依然不起作用 三.加上touchmove事件:window.ontouchmove = function(e){e.preventDefault()

网页title栏文字滚动

<script type="text/javascript"> var text = document.title var timerID function newtext() { clearTimeout(timerID) document.title = text.substring(1, text.length) + text.substring(0, 1) text = document.title.substring(0, text.length) timerID

移动端弹出层滚动卡顿解决方案

IOS: -webkit-overflow-scrolling: touch; overflow-scrolling: touch; 安卓: -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 安卓的表现仍然不够流畅.但是至少没之前那么卡顿了... 原文地址:https://www.cnblogs.com/dodocie/p/8685901.html

iframe的滚动栏问题:显示/隐藏滚动栏

iframe 问题2008-01-22 16:37******   显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww