js卷轴滚动鼠标拖动滚动。例子

最新推荐文章于 2022-07-20 00:44:40 发布

lisatisfy

最新推荐文章于 2022-07-20 00:44:40 发布

阅读量2.8k

点赞数

分类专栏： Javascript 滚动卷轴拖动 js 对象文章标签： function xhtml scroll webkit object android

本文链接：https://blog.csdn.net/lisatisfy/article/details/6606026

版权

博客展示了如何使用JavaScript创建鼠标拖动滚动的功能，适用于具有WebKit的移动设备，如Android和iPhone。通过引入scroll.js并调用Scroller构造函数即可实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目有个需求就是在固定高度容器里放几十条的数据内容。不想使用滚动条，要用鼠标上下拖动时进行内容的滚动。花了点时间，写了个Demo。贴代码：

效果如下：(鼠标拖动了几个像素的图片)

代码：scroll.js

/* 可滚动卷轴对象
 * @description : 容器里拖动鼠标可实现内容滚动，兼容各类浏览器(ie6/7/8/firefox/safari/opera/chrome/)。
 *      using: new Scroller(@id|{id:@id,drag:false|true,scroll:true|false,scrollBase:@number}) 即可  id为你的容器对象或容器ID
 * @date  : 2011-07-12
 * @author  : limanzu753@163.com
 * history  : 
 *    2011-07-13  修改鼠标在容器外里还可以继续滚动 0.11 limanzu753@163.com  
 *    2011-07-20  增加鼠标滚动，动态配置滚动像素，动态配置是否支持鼠标滚动以及鼠标拽动滚动功能
 */
function Scroller(args) {
 if (this instanceof  Scroller == false) {return new Scroller(args);}
 if (typeof args === "string" ) {
  this.container = this.$(args); //容器对象 
  this.drag = true;
  this.scroll = true;
  this.scrollBase = 35;
 } else {
  this.container = this.$(args.id || args.container || args.obj); //容器对象 
  this.drag = args.drag == undefined ? true : args.drag;
  this.scroll = args.scroll == undefined ? true : args.scroll;
  this.scrollBase = args.scrollBase || 35;
 }
 this.y = 0;//mousedown时记录鼠标的纵坐标
 this.init();
}
Scroller.prototype = {
 $:function(id) {
  if (typeof id === "object") { return id; } 
  return do