Scroll.js和Scroll_mouse.js

最新推荐文章于 2022-05-17 22:41:16 发布
最新推荐文章于 2022-05-17 22:41:16 发布
阅读量728 收藏
点赞数
文章标签： javascript jquery web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33688429/article/details/71910620
版权

Scroll.js，用于实现鼠标点击滚动条滚动、鼠标拖动滚动、鼠标点击上下按钮滚动

/* 
* @Author: Marte
* @Date:   2017-05-03 21:19:44
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-13 23:20:49
*/

/* 点击滚动 */
/* 通过各自能移动的距离比例，算出各自每次移动的距离 */
/* 设定spd参数可以调整快慢，原理是设定每次移动距离（相对） */
/* 传入参数为task_list的id，和每次滚动的相对距离 */
function scroll_click(task_list,spd){

    //ul能移动的高度
    var $ulMH = $(task_list+' ul').height()-$(task_list).height();
    //如果li很少不需要滚动，阻止事件
    if($ulMH <= 0) return false;

    //滚动按钮btn能移动的高度
    var $scrollbtnMH = $(task_list+' .scroll_bar').height()-20-$(task_list+' .scroll_btn').height();


    //根据比例算出每次，ul和btn能移动的距离
    var $ulSpeed = spd*($ulMH/($scrollbtnMH+$ulMH));

    var $scrollSpeed =spd*($scrollbtnMH/($scrollbtnMH+$ulMH));

    //btn位置的上下限
    var $uplimit = 10;
    var $lowlimit = $scrollbtnMH+10;


    //上滚按钮
    $(task_list+' .scroll_down').click(function(event) {
        //获取btn初始位置
        var $offsetTB = parseInt($(task_list+' .scroll_btn').css('top'));

        if(!($(task_list+' ul').is(":animated"))){//等待动画完成
            //判断若在边界，设定好位置
            if(parseInt(parseInt($(this).css('top'))) >= $scrollbtnMH+10){
                $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
                $(task_list+" ul").css('bottom',$ulMH+'px');
            }
            if($offsetTB < $lowlimit){
                if($offsetTB+$scrollSpeed >= $lowlimit){//下一次运动接近最底端，直接到最底端
                    $(task_list+' ul').animate({bottom: $ulMH+'px'},500);
                    $(task_list+' .scroll_btn').animate({top: $lowlimit+"px"},500);
                }
                else{
                    $(task_list+' ul').animate({bottom: '+='+$ulSpeed+'px'},500);
                    $(task_list+' .scroll_btn').animate({top:"+="+$scrollSpeed+"px"},500);
                }
            }
        }
    });
    //下滚按钮
    $(task_list+' .scroll_up').click(function(event) {
        //获取btn高度
        var $offsetTB = parseInt($(task_list+' .scroll_btn').css('top'));

        if(!($(task_list+' ul').is(":animated"))){
            if($offsetTB > $uplimit){
                if($offsetTB-$scrollSpeed <= 10){//下一次运动接近最顶端，直接到最顶端
                    $(task_list+' ul').animate({bottom: "0px"},500);
                    $(task_list+' .scroll_btn').animate({top: $uplimit+"px"},500);
                }
                else{
                    $(task_list+' ul').animate({bottom: "-="+$ulSpeed+"px"},500);
                    $(task_list+' .scroll_btn').animate({top:"-="+$scrollSpeed+"px"},500);
                }
            }
        }
    });
}

/* 拖动滚动 */
/* 通过鼠标移动距离，直接设定btn的位置（初始距离+移动距离） */
/* 然后根据比例算出内容要上下移动的距离 */
/* 传入参数为task_list的id */
function scroll_move(task_list){


    //ul能移动的高度
    var $ulMH = $(task_list+' ul').height()-$(task_list).height();
    //如果li很少不需要滚动，阻止事件
    if($ulMH <= 0) return false;

    //滚动按钮btn能移动的高度
    var $scrollbtnMH = $(task_list+' .scroll_bar').height()-20-$(task_list+' .scroll_btn').height();

    var mousePosY;//记录鼠标的坐标
    var initPosY;//记录每次点击btn后，btn的初始位置
    var initUlY;//记录每次点击btn后，ul的初始位置
    var isMouseDown;//记录鼠标是否按下

    $(task_list+' .scroll_btn').mousedown(function(event) {
        //捕获初始鼠标位置、btn位置
        isMouseDown = true;

        mousePosY = event.pageY;
        initPosY = parseInt($(this).css("top"));
        initUlY = parseInt($(task_list+" ul").css('bottom'));

        /*判断若接近边界，设定好位置，阻止事件*/
        /*提前阻止事件，防止越界*/
        if(parseInt($(this).css('top')) < 12){
            $(this).css('top',"10px");
            $(task_list+" ul").css('bottom','0px');
            return false;
        }
        else if(parseInt($(this).css('top')) > $scrollbtnMH+8){
            $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
            $(task_list+" ul").css('bottom',$ulMH+'px');
            return false;
        }
    }).mousemove(function(event) {
        var moveY = parseInt(event.pageY-mousePosY);//btn移动的距离
        var tempY = moveY+initPosY;//btn当前的位置
        var moveUlY = parseInt(($ulMH/$scrollbtnMH)*moveY);//按比例算好要ul移动的距离

        if(isMouseDown){//鼠标按下

            /*判断若在边界，设定好位置，阻止事件*/
            if(tempY <= 10 || initUlY+moveUlY<=0){
                $(this).css('top',"10px");
                $(task_list+" ul").css('bottom','0px');
                return false;
            }
            else if(tempY >$scrollbtnMH+10){
                $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
                $(task_list+" ul").css('bottom',$ulMH+'px');
                return false;
            }

            else{
                $(this).css('top', tempY+'px');
                $(task_list+" ul").css('bottom',initUlY+moveUlY+'px');
            }
        }
    }).mouseup(function(event) {
        isMouseDown = false;
        /*判断若在边界，设定好位置*/

        if(parseInt($(this).css('top')) < 10){
            $(this).css('top',"10px");
            $(task_list+" ul").css('bottom','0px');
        }
        else if(parseInt($(this).css('top')) > $scrollbtnMH+10){
            $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
            $(task_list+" ul").css('bottom',$ulMH+'px');
        }
    }).mouseleave(function(event) {
        isMouseDown = false;
        /*判断若在边界，设定好位置*/
        if(parseInt($(this).css('top')) < 10){
            $(this).css('top',"10px");
            $(task_list+" ul").css('bottom','0px');
        }
        else if(parseInt($(this).css('top')) > $scrollbtnMH+10){
            $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
            $(task_list+" ul").css('bottom',$ulMH+'px');
        }
    }).mouseenter(function(event) {//解决ie下需要点击一次后才能拖动的Bug
        $(this).trigger('mousedown');
    });
}

/* 点击滚动条的位置滚动 */
function scroll_clickBar(task_list){

    //ul能移动的高度
    var $ulMH = $(task_list+' ul').height()-$(task_list).height();

    //如果li很少不需要滚动，阻止事件
    if($ulMH <= 0) return false;

    //滚动按钮btn能移动的高度
    var $scrollbtnMH = $(task_list+' .scroll_bar').height()-20-$(task_list+' .scroll_btn').height();


    var mousePosY;//记录点击时鼠标的坐标
    var initPosY;//记录每次点击btn前，btn的初始位置
    var initUlY;//记录每次点击btn前，ul的初始位置
    var barTop=$(task_list+' .scroll_bar').offset().top+10;

    $(task_list+' .scroll_bar').mouseenter(function(event) {
        initPosY = parseInt($(task_list+' .scroll_btn').position().top);
        initUlY = parseInt($(task_list+' ul').css('bottom'));
    }).click(function(event) {
        mousePosY = parseInt(event.pageY-barTop);//鼠标相对高度

        if(mousePosY<=0){//鼠标位置在上边界
            $(task_list+' .scroll_btn').animate({top: '10px'}, 500);
            $(task_list+' ul').animate({bottom: '0px'},500);
        }
        else if(mousePosY >= $scrollbtnMH+10){//在下边界
            $(task_list+' .scroll_btn').animate({top: $scrollbtnMH+10+'px'}, 500);
            $(task_list+' ul').animate({bottom: $ulMH+'px'},500);
        }
        else{
            var moveY = mousePosY-initPosY;//btn要移动的距离
            var tempY = moveY+initPosY;//btn要移动的位置

            var moveUlY = parseInt(($ulMH/$scrollbtnMH)*moveY);//按比例算好要ul移动的距离

            $(task_list+' .scroll_btn').animate({top: tempY+'px'}, 500);
            $(task_list+' ul').animate({bottom:initUlY+moveUlY+'px'},500);
        }
    });
}

Scroll_mouse.js，用于实现滚轮滚动


/* 利用js的事件监听实现滚轮滚动 */
/* 除此之外和点击滚动差不多 */
function scroll_mouse(task_list,task_list2,spd){

    //ul能移动的高度
    var $ulMH = $(task_list+' ul').height()-$(task_list).height();
    //如果li很少不需要滚动，阻止事件
    if($ulMH <= 0) return false;

    //滚动按钮btn能移动的高度
    var $scrollbtnMH = $(task_list+' .scroll_bar').height()-20-$(task_list+' .scroll_btn').height();


    //根据比例算出每次，ul和btn能移动的距离
    var $ulSpeed = spd*($ulMH/($scrollbtnMH+$ulMH));

    var $scrollSpeed =spd*($scrollbtnMH/($scrollbtnMH+$ulMH));

    //btn位置的上下限
    var $uplimit = 10;
    var $lowlimit = $scrollbtnMH+10;

    var scrollDir;//记录滚轮方向，下滚-1，上滚1

    var MouseWheelHandler = function(e) {
          e.preventDefault();
          e = window.event || e;
          if(e.wheelDelta){//判断浏览器IE，谷歌滑轮事件 
            scrollDir = e.wheelDelta>0? 1:-1;
          }
          else if(e.detail){//判断浏览器firefox滑轮事件，上下滚反过来了 
            scrollDir = e.detail>0? -1:1;
          }

        if(scrollDir == -1){//下滚
            var $offsetTB = parseInt($(task_list+' .scroll_btn').css('top'));

            if(!($(task_list+' ul').is(":animated"))){//等待动画完成
                if($offsetTB < $lowlimit){
                    if($offsetTB+$scrollSpeed >= $lowlimit){//下一次运动接近最底端，直接到最底端
                        $(task_list+' ul').animate({bottom: $ulMH+'px'},500);
                        $(task_list+' .scroll_btn').animate({top: $lowlimit+"px"},500);
                    }
                    else{
                        $(task_list+' ul').animate({bottom: '+='+$ulSpeed+'px'},500);
                        $(task_list+' .scroll_btn').animate({top:"+="+$scrollSpeed+"px"},500);
                    }
                }
            }
        }
        else{//上滚
            var $offsetTB = parseInt($(task_list+' .scroll_btn').css('top'));

            if(!($(task_list+' ul').is(":animated"))){//等待动画完成
                if($offsetTB > $uplimit){
                    if($offsetTB-$scrollSpeed <= 10){
                        $(task_list+' ul').animate({bottom: '0px'},500);
                        $(task_list+' .scroll_btn').animate({top: $uplimit+"px"},500);
                    }
                    else{
                        $(task_list+' ul').animate({bottom: '-='+$ulSpeed+'px'},500);
                        $(task_list+' .scroll_btn').animate({top:"-="+$scrollSpeed+"px"},500);
                    }
                }
            }
        }   
    }
    var addMouseWheelHandler = function() {
        var oUl = document.getElementById(task_list2);
        //这是js的事件监听方法，jquery没有
        //IE9, Chrome, Safari, Oper
        oUl.addEventListener("mousewheel", MouseWheelHandler, false); 
        //firefox
        oUl.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
    }
    addMouseWheelHandler();
}

后记：似乎存在，如果页面ul动态变化，ul的高度始终只读取一次的问题。把变量弄成那个js文件的全局可以解决

_Neon_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Scroll.js:Web开发人员的一个很小但很棒的javascript库
05-16
Scroll.js 一个非常小的但功能强大的javascript库，适用于Web开发人员。 特征 在Mac上为您提供Safari滚动体验。 优化的算法使滚动更加自然。 全帧性能。 js文件的大小太大，只有1kb（压缩）。 如何使用 只需将scroll.js （或scroll.min.js ）文件导入到您的head标记中，如下所示： < script type =" text/javascript " src =" path/to/scroll.min.js " > </ script > 证明 您可以在CodePen上访问此演示：
mousescroll.js网页滚动条插件特效代码
03-20
mousescroll.js是一款专为网页设计的滚动条插件，它基于JavaScript库jQuery构建，旨在提供更美观、交互性更强的滚动体验。这款插件的突出特点是其高度可定制化和易用性，允许开发者在同一个页面上多次应用，以满足...
scroll.js
delv1345的博客
11-17 206
基于jquery的无缝平滑滚动插件 (function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; va...
滑动插件scroll.js
kirsten_z的博客
09-14 1285
(function(){ var Roll = function(pgno,pageSize){ this.page_num = pgno?pgno:1; this.pageSize = pageSize?pageSize:3; this.isEnd = false; }; Roll.prototype = {
js的scroll详解
jggnice的博客
05-17 5570
scrollTop : 滚动条滚动距离 说明：chrome下他会以为滚动条是文档元素的，所以需要做兼容 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 我们来验证下chrome是否存在兼容的问题： <!DOCTYPE html> <html la...
html首页滚动插件,利用js实现网页滚动条插件mousescroll.
weixin_31939167的博客
06-07 483
特效描述：利用js实现 网页滚动条 插件mousescroll.。利用js实现网页滚动条插件mousescroll.代码结构1. 引入JS2. HTML代码在每个匹配元素的上下文中执行一个函数。这意味着每次执行传入的函数(对于每个匹配的元素都是一次)，“this”关键字指向特定的DOM元素。此外，函数在执行时传递一个参数，表示元素在匹配集(整数，零索引)中的位置。在每个函数中返回'false'会完...
mousescroll.js网页滚动条插件
06-24
**mousescroll.js网页滚动条插件**是一款专为网页设计和开发人员打造的工具，主要用于增强网页的滚动体验。这款插件基于流行的JavaScript库jQuery构建，利用jQuery的高效性能和广泛兼容性，使得在各种浏览器环境中都...
parlx.js：:computer_mouse_selector:视差滚动效果库
02-04
如果您使用React，请在parlx.js库的实现中安装组件！ 如何安装 首先，通过npm在您的项目中安装该库： $ npm install parlx.js 或纱线： $ yarn add parlx.js 您还可以通过以下CDN之一连接脚本： bundle.run： ...
jQuery+mousescroll.js自定义美化div滚动条插件.zip
最新发布
09-22
总结，jQuery+mousescroll.js插件为开发者提供了一种方便、灵活的方式来美化和定制div滚动条，提升网页的视觉效果和交互体验。通过理解和实践，开发者可以将这种技术运用到自己的项目中，创造出更具吸引力的网页界面...
mousescroll.js网页滚动条插件.zip
07-05
"mousescroll.js"是一款基于jQuery库的网页滚动条插件，它允许开发者以更加灵活和定制化的方式控制网页的滚动行为，为用户提供更佳的浏览体验。本文将深入探讨该插件的实现原理、使用方法以及如何在项目中进行集成。...
iscroll所用到的js文件
04-12
包含iscroll.js、iscroll-infinite.js、iscroll-lite.js、iscroll-probe.js、iscroll-zoom.js
iscroll4.js
01-07
html5页面支持上拉刷新下拉加载更多数据的实现，关于实现可以看看这篇文章：https://blog.csdn.net/u012962759/article/details/85329854
jquery.linscroll.js
06-30
利用jquery实现图片样式的滚动条，所需的Js文件 内有简单例子
jquery.ui.mouse.js
11-26
JQuery的插件，实现拖拽效果所需要的插件，jquery.ui.mouse.js
better-scroll.js文档
汇而不置的博客
04-09 9838
better-scroll 介绍 better-scroll 是什么 better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。better-scroll 是基于原生 JS 实现的，不依赖任何框架。它...
iscroll.js文档
weixin_30907935的博客
05-10 116
　　iScroll是高性能的、小尺寸的、无依赖关系的、支持多平台的滑动JavaScript库。 当然，不只是scroll，还有滚动、缩放、平移、无限滚动、视差滚动等。 　　为了达到更好的新能，所以iScroll分为了很多版本，我们可以根据需要来使用，目前主要有下面的一些js库： iscroll.js，它是通用脚本。它包括最常用的功能，并在占据很小的内存中提供非常高的性能。我们一般使用...
js中scroll滚动相关
jggnice的博客
05-17 3696
js中scroll滚动相关 scroll，滚动，一般讨论的是网页整体与浏览器之间的关系。 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度。 element.scrollWidth 返回元素的整体宽度。 element.scrollLeft 返回元素左边缘与视图之间的距离。 element.scrollTop 返回元素上边缘与视图之间的距离。 这四个属性，全部是只读属性 其中，无非就是分为宽高和左..
iscroll.js的用法
weixin_33790053的博客
05-16 617
<div id='wrapper1'> <ul class="ul1"> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> &l...
iScroll.js实现缩放、下拉刷新、滑动切换等移动应用场景
buyue
06-07 2191
http://cubiq.org/iscroll-5
scrolloverflow.min.js怎么引入使用
06-03
首先，你需要下载 `scrolloverflow.min.js` 文件，可以从官方网站或者其他可靠网站进行下载。然后，将该文件保存到你的项目文件夹中。 接下来，在你的 HTML 文件中，使用 `<script>` 标签将该文件引入到你的页面中。例如： ```html <script src="path/to/scrolloverflow.min.js"></script> ``` 请替换 `path/to/` 为你保存 `scrolloverflow.min.js` 文件的路径。 最后，在你的 JavaScript 代码中，你可以使用 `scrolloverflow` 对象来使用该插件的功能。例如： ```javascript var myScroll = new scrolloverflow('myElement', { scrollbars: true, mouseWheel: true, resize: true, overflowBehavior: { x: 'hidden', y: 'scroll' } }); ``` 请替换 `myElement` 为你想要应用该插件的元素的 ID。此外，你可以根据需要添加或修改选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值