js模拟滚动条滚动

最新推荐文章于 2023-03-15 14:01:30 发布
最新推荐文章于 2023-03-15 14:01:30 发布
阅读量130 收藏
点赞数
原文链接：http://www.cnblogs.com/li-sir/p/9675190.html
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
    *{margin:0; padding:0; list-style:none;}
    body{
        height:2000px;
    }
    .box1{
        width: 320px;
        height: 400px;
        background: #ccc;
        overflow: hidden;
        overflow-y: scroll;
        margin: 20px 0 0 100px;
    }
    .con1{
        font-size: 18px;
    }
    #out{
        width: 320px;
        height: 400px;
        background: url(bg1.png) 0 0 repeat-x;
        position: absolute;
        left: 500px;
        top: 20px;
        overflow: hidden;
    }
    #con{
        width: 280px;
        padding: 5px;
        font-size: 18px;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #box{
        width: 30px;
        height: 400px;
        position: absolute;
        right: 0;
        top: 0;
    }
    #drag{
        width: 30px;
        height: 53px;
        background: url(icon2.png) 0 0 no-repeat;
        position: absolute;
        left: 0px;
        top: 0px;
    }
</style>
</head>
<body>
<div class="box1">
    <p class="con1">模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条</p>
</div>

<div id="out">
    <div id="con">
        模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条
    </div>
    <div id="box">
        <p id="drag"></p>
    </div>
</div>
<script>
    var out=document.getElementById('out');
    var con=document.getElementById('con');
    var box=document.getElementById('box');
    var drag=document.getElementById('drag');
    drag.onmousedown=function (ev){
        var e=ev||window.event;
        if (e.preventDefault) {
            e.preventDefault();
        } else{
            e.returnValue=false;
        };
        var d_bkt=e.clientY-drag.offsetTop;
        document.onmousemove=function (ev){
            var e=ev||window.event;
            var top=e.clientY-d_bkt;
            if (top<=0) {
                top=0;
            };
            if (top>=box.clientHeight-drag.clientHeight) {
                top=box.clientHeight-drag.clientHeight;
            };
            var scale=top/(box.clientHeight-drag.clientHeight);
            var cony=scale*(con.clientHeight-out.clientHeight);
            drag.style.top=top+'px';
            con.style.top=-cony+'px';
            console.log(top);
        }
        document.onmouseup=function (){
            document.onmousemove=null;
        }
    }
    var str=window.navigator.userAgent.toLowerCase();
    if (str.indexOf('firefox')!=-1) {//火狐浏览器
        out.addEventListener('DOMMouseScroll',function (e){
            e.preventDefault();//阻止窗口默认的滚动事件
        if (e.detail<0) {
            var t=con.offsetTop+20;
            if (t>=0) {
                t=0;
            };
            if (t<=-(con.clientHeight-out.clientHeight)) {
                t=-(con.clientHeight-out.clientHeight);
            };
            var scale=t/(con.clientHeight-out.clientHeight);
            var top=scale*(box.clientHeight-drag.clientHeight);
            con.style.top=t+'px';
            drag.style.top=-top+'px';
        };
        if (e.detail>0) {
            var t=con.offsetTop-20;
            if (t>=0) {
                t=0;
            };
            if (t<=-(con.clientHeight-out.clientHeight)) {
                t=-(con.clientHeight-out.clientHeight);
            };
            var scale=t/(con.clientHeight-out.clientHeight);
            var top=scale*(box.clientHeight-drag.clientHeight);
            con.style.top=t+'px';
            drag.style.top=-top+'px';
        };
        },false);
    } else{//非火狐浏览器
        out.onmousewheel=function (ev){
            var e=ev||window.event;
            if (e.preventDefault) {
                e.preventDefault();
            } else{
                e.returnValue=false;
            };
            if (e.wheelDelta>0) {
            var t=con.offsetTop+20;
            if (t>=0) {
                t=0;
            };
            if (t<=-(con.clientHeight-out.clientHeight)) {
                t=-(con.clientHeight-out.clientHeight);
            };
            var scale=t/(con.clientHeight-out.clientHeight);
            var top=scale*(box.clientHeight-drag.clientHeight);
            con.style.top=t+'px';
            drag.style.top=-top+'px';
        };
        if (e.wheelDelta<0) {
            var t=con.offsetTop-20;
            if (t>=0) {
                t=0;
            };
            if (t<=-(con.clientHeight-out.clientHeight)) {
                t=-(con.clientHeight-out.clientHeight);
            };
            var scale=t/(con.clientHeight-out.clientHeight);
            var top=scale*(box.clientHeight-drag.clientHeight);
            con.style.top=t+'px';
            drag.style.top=-top+'px';
        };
        }
    };
</script>
</body>
</html>

终极效果图

 

转载于:https://www.cnblogs.com/li-sir/p/9675190.html

weixin_30603633
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript动画系列之模拟滚动条
10-20
本文主要介绍了js动画模拟滚动条的实现原理以及分享了通过滚动条实现的几个应用的实例代码:1.通过移动滚动条来实现数字的加减;2.通过拖动滚动条来实现元素尺寸的变化，以改变元素宽度为例;3.通过拖动滚动条来实现...
JavaScript实现虚拟滚动
weixin_53376443的博客
08-23 1618
1.创建一个容器元素，用来显示列表内容。2.绑定滚动事件，当滚动条滚动时，触发加载列表项的函数。在这种方式中，只有当前可见范围内的列表项会被生成和加载，减少了渲染和内存消耗。需要注意的是，这只是一种基本的实现方式，具体的实现可能会因为需求的不同而有所变化，例如可以添加缓存、虚拟化窗口等优化。
虚拟滚动列表
weixin_43294560的博客
11-09 1044
刷新前:虽然定位的位置和内容变了,但是展示的内容是不变的,所以刷新能和上次滑动状态视觉效果一致。
关于模拟一个滚动条的实现------横向滚动条 原生 html css js
qq_46634851的博客
03-15 705
但是 overflow: auto;的滚动条太难看了，尽管可以重些一些样式，但是移动端仍不支持。无奈只能做出妥协，遂想 可否实现自定义模拟一个滚动指示器出来，以求满足业务要求。在日常开发中会遇到一些时候，在实现内部滚动的同时，也希望用户看到当前的滚动位置。
移动端模拟滚动
weixin_34293902的博客
09-10 307
背景 由于移动端原生滚动的局限性以及兼容性，部分特定场景的需求无法满足。例如，笔者最近就接了一个需求：整个页面分为三块，每块内容的高度不等（但都超过一屏），要求滚动到内容的临界点有一个停顿的效果，下拉可以看到下一块的部分内容，满足条件则滑到下一块内容。这种场景下，原生的滚动根本无法支持。因此，本文的主角就亮相了：模拟滚动，即尽可能的模拟原生滚动，但是又提供了一些扩展，满足复杂场景的需求。 本文将从...
js两种滚动事件写法
Goaread的博客
12-02 5404
js两种滚动事件写法，一种可判断滚动条滚动方向，一种只判断可视区底部到页面底部的距离，即滚动条底部到可视区底部的距离。
原生js实现模拟滚动条
10-24
本文给大家分享的是使用原生javascript实现模拟滚动条的方法及代码，效果非常棒，有需要的小伙伴可以参考下。
js模拟滚动条(横向竖向)
10-27
js模拟滚动条(横向竖向)，需要的朋友可以参考一下
javascript模拟滚动条实现代码
10-29
从csdn的blog上转过来的 做了些修改，其实写的比较糟糕(我指的是构造) 我用的是以前的一个drag类 在这个基础上在的来完成的Slider
React虚拟滚动介绍与实现
cleanHtroop的博客
02-27 4217
React无限滚动的设计的基本思路和具体实现的详细说明 当列表需要展示上千上万级别甚至是趋向于无限的数据时，DOM元素的堆积会导致浏览器渲染的性能降低，导致用户体验降低甚至出现页面假死状态。这个时候使用虚拟滚动的技术，可以让DOM数量维持在固定的数量，从而解决以上问题
js 模拟滚动条js 模拟滚动条js 模拟滚动条
11-30
js 模拟滚动条js 模拟滚动条js 模拟滚动条js 模拟滚动条
如何控制滚轮横向滑动(原生JS实现方法)
weixin_46022934的博客
10-22 7025
控制滚轮横向滑动 解决思路如下 `1.如何在页面中展示横向滚动条` `2.如何获取鼠标的【滚动轮】` `3.通过什么Api去实现滚动效果 ` 一、如何创建横向滚动条 1.代码如下(HTML和CSS) 2.效果如下图所示: 二、鼠标滚动轮事件(mousewheel和wheel事件) 1.wheel鼠标滚轮(完美支持所有浏览器) JS代码如下所示: `*&*需要注意的事项(wheel滚动方向)*&*`: 2.mousewheel支持该鼠标事件的浏览器如下(生产环境不可使用,应该使用wheel) 测试效果图如下
C#调用前台js方法，实现滚动条跟随选中节点位置变化
李黎敏 ——为优秀j2ee架构师而努力
03-31 1653
文章之初，首先将C#调用前台js的方法贴出，相当于一个固定的格式，在调用其他方法的时候只需要将方法名替换掉即可。 ScriptManager.RegisterStartupScript(Page, this.GetType(), DateTime.Now.Ticks.ToString(), funcName + "('" + param + "');", true);     这里的func
原生JS实现页面滚动条加载数据，页面下拉加载内容
A20201130的博客
02-13 2034
一、前言 今天这个案例是滚动条事件，当滚动条距离底部的距离小于一个范围值时，会自动的增加页面的高度，从而达到永远划不到底部的效果。 二、scrollHeight、scrollTop和clientHeight的区别 网页的全文高 滚动条距离顶部的距离（滚动条被卷去的距离） 可以看到的屏幕高度 由于js没有给我们滚动条距离底部的距离我们就需要自己计算了 用网页的全文高减去滚动条距离顶部的距离减去可以看的的屏幕高度就可以得到滚动条距离底部的距离了。 三、代码 <style>
使用JavaScript让滚动条自动向下滑动
m0_61143764的博客
03-05 3660
用js自动向下滑动
JS模拟滚动条功能实现
weixin_42442123的博客
11-12 5924
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
JS实现滚动监听以及滑动到顶部
热门推荐
Low_Key_Shulman的博客
03-26 2万+
以前做滚动监听都是用jquery来实现这样的效果，虽然用jquery实现起来很方便，但是还是想用原生js来实现一下。HTML代码：<div class="uptop" id="uptop"> <img src="images/up.png" id="to-top">//这里用了一个向上的箭头图片，用于表明返回顶部 </div>CSS代码：.uptop{ positio
滚动条事件顶部与左侧的实现
qq_38122859的博客
09-26 271
主要是描述了根据其滚动条位置的改变从而实现了其顶部与左侧部分的实现
js操作滚动条事件实例
smile的博客
07-31 1万+
本文实例讲述了js操作滚动条事件的方法。分享给大家供大家参考。具体分析如下： 之前一直很纳闷，如何监视滚动条的事件，今天终于有点明白了。 下边代码，是监听滚动条只要移动，下方的返回顶部的div显示与隐藏的代码 ? 1 2 3 4 5 6 7 8 window.onscroll =
selenium 去除滚动条
最新发布
01-05
以下是两种使用Selenium去除滚动条的方法： 1. 使用JavaScript代码将滚动条滚动到页面底部： ```python from selenium import webdriver driver = webdriver.Chrome() driver.get('https://www.example.com') # 将滚动条滚动到页面底部 driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") ``` 2. 使用ActionChains类模拟按键操作，将滚动条滚动到页面底部： ```python from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains driver = webdriver.Chrome() driver.get('https://www.example.com') # 模拟按键操作，将滚动条滚动到页面底部 actions = ActionChains(driver) actions.key_down(Keys.END).perform() ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值