缓冲菜单（滑块根据滚轮滑动一直滑动到页面右边的中间）

最新推荐文章于 2021-06-03 09:44:33 发布

OrdnAry

最新推荐文章于 2021-06-03 09:44:33 发布

阅读量204

点赞数

分类专栏：学习文章标签： js css html

本文链接：https://blog.csdn.net/OrdnAry/article/details/108294553

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #menu{width: 100px; height: 100px; background-color: red; position: absolute; right: 0px}
        *{margin: 0px; padding: 0px}
    </style>
    <script>
        window.onload = function(){
            var odiv = document.getElementById("menu");
            //  获取滚轮的高度 
            var  scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //获取页面的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

            var Height =parseInt(scrollTop + (windowHeight - odiv.offsetHeight)/2);
            Move(Height);

        }
        window.onscroll = function (){
                var odiv = document.getElementById("menu");
                //  获取滚轮的高度 
                var  scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                //获取页面的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

                var Height =parseInt(scrollTop + (windowHeight - odiv.offsetHeight)/2);
                Move(Height);
            }
        var timer =null; 
        function Move(iTarget){
                clearInterval(timer);
                timer = setInterval(function(){
                    var odiv = document.getElementById("menu");
                    //计算速度
                    var speed= (iTarget - odiv.offsetTop)/8;
                    speed = speed >0 ?  Math.ceil(speed) : Math.floor(speed);

                    if(odiv.offsetTop == iTarget){
                        clearInterval(timer);
                    }else{
                        odiv.style.top = odiv.offsetTop + speed + "px";
                    }
                },50);
            }
        
    </script>
</head>
    <body style = 'height: 3000px'>
        <div id = 'menu'></div>
    </body>
</html>

在这里插入图片描述

OrdnAry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
缓冲菜单（滑块根据滚轮滑动一直滑动到页面右边的中间）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #menu{width: 100px
复制链接

扫一扫