侧边栏层滚动缓存运动

<!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-16 13:46:54

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

边栏层滚动运动缓存

<!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=

关于移动端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

层的缓冲运动

<!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=

移动端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()

协议(实现模块)层对缓存机制的支持。

@interface JWCacheURLProtocol : NSURLProtocol<NSURLSessionDataDelegate> - (void)startLoading{ NSCachedURLResponse *urlResponse = [[NSURLCache sharedURLCache] cachedResponseForRequest:[self request]]; if (urlResponse) { //如果缓存存在,则使用缓存.并且开启异步线程去更新缓存 [

缓存运动

<style>#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}</style><script>function startMove(){ var oDiv=docu

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

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

spring aop + xmemcached 配置service层缓存策略

Memcached 作用与使用 基本介绍 1,对于缓存的存取方式,简言之,就是以键值对的形式将数据保存在内存中.在日常业务中涉及的操作无非就是增删改查.加入缓存机制后,查询的时候,对数据进行缓存,增删改的时候,清除缓存即可.这其中对于缓存的闭合就非常重要,如果缓存没有及时得到更新,那用户就会获取到过期数据,就会产生问题. 2,对于单一业务的缓存管理(数据库中只操作单表),只需生成一个key,查询时,使用key,置入缓存:增删改时,使用key,清除缓存.将key与表绑定,操作相对简单. 3,但是在