div横向模拟滚动条,带懒加载

最新推荐文章于 2024-05-14 22:33:21 发布

判罚之央

最新推荐文章于 2024-05-14 22:33:21 发布

阅读量1.5k

点赞数

文章标签：模拟滚动条

本文链接：https://blog.csdn.net/xzs_123/article/details/39694477

版权

之前工作需要,在网上找了一个横向的div模拟滚动条的方法,后来有自己改动了下,在相关js中加了一个懒加载的方法,贴出来大家一起学习下

首先贴出相当于插件的scrolltools.js

var indexR=0;//全局变量,懒加载用
var tempBool = false;
var flagT="";
var flagLoad="";
(function(){
if(!window.zzc){window['zzc'] = {} };
function isIE(){ return (document.all) ? true : false;};
window['zzc']['isIE'] = isIE;
function $(id){return typeof id == 'string' ? document.getElementById(id) : id};
window['zzc']['$'] = $;
function $$(id,tag){
	return $(id).getElementsByTagName(tag);}
window['zzc']['$$'] = $$;
function getElementsByClassName(name,type){
 var r=[];
 var re=new RegExp("(^|\\s)"+name+"(\\s|$)");
 var elem=document.getElementsByTagName(type||"*");
 for(var i=0;i<elem.length;i++){
  if(re.test(elem[i].className)) r.push(elem[i]);
  }
  return r;
 }
window['zzc']['getElementsByClassName'] = getElementsByClassName; 
function addEvent(eventTarget,eventType,fnHandler){
   if(eventTarget.addEventListener){//for FF
   eventTarget.addEventListener (eventType,fnHandler,false);
   } else if(eventTarget.attachEvent){//for IE
   eventTarget.attachEvent("on" + eventType,fnHandler);
   } else{//for other
   eventTarget["on" + eventType] = fnHandler;
   }
     };
window['zzc']['addEvent'] = addEvent;
function removeEvent(eventTarget,eventType,fnHandler){
   if(eventTarget.removeEventListener){//for FF
   eventTarget.removeEventListener (eventType,fnHandler,false);
   } else if(eventTarget.detachEvent){//for IE
   eventTarget.detachEvent("on" + eventType,fnHandler);
   } else{//for other
   eventTarget["on" + eventType] = null;
   }
     };
window['zzc']['removeEvent'] = removeEvent;
function getBrowerWindowSize(){
    var de = document.documentElement;
    return{ 
 'width':(self.innerWidth||( de && de.offsetWidth )||document.body.offsetWidth),
 'height':(self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight)
 }
};
window['zzc']['getBrowerWindowSize'] = getBrowerWindowSize;
function getPageSize(){
 var de=document.documentElement;
 return{
 'width':(document.body.scrollWidth||(de&&de.scrollWidth)),
 'height':(document.body.scrollHeight||(de&&de.scrollHeight))
 } 
};
window['zzc']['getPageSize'] = getPageSize; 
function pageX(elem){
 return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
  }
window['zzc']['pageX'] = pageX;  
  
function pageY(elem){
 return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
  }
window['zzc']['pageY'] = pageY;
})();
function Drag(activeObj,dragObj,options){
	  var aObj = zzc.$(activeObj);//激活元素
	  var dObj = zzc.$(dragObj);//拖动元素
	  var iDiffX = 0;
	  var iDiffY = 0;
	  var Options = options || {};
	  var Limit = Options.Limit||false;
	  var mxLeft = parseInt(Options.mxLeft)||0;//左边限制
	  var mxRight = parseInt(Options.mxRight)||0;//右边限制
	  var mxTop = parseInt(Options.mxTop)||0;//上边限制
	  var mxBottom = parseInt(Options.mxBottom)||0;//下边限制
	  var onMove = Options.onMove||function(){};//移动时执行 
  
	(function start(){  
	     zzc.addEvent(aObj,'mousedown',handleMouseDown);
	  })();
  
	function handleMouseMove(oEvent){ 
		var oEvent = window.event || arguments[0];
		var iLeft = oEvent.clientX - iDiffX, iTop = oEvent.clientY - iDiffY;
		if(Limit){
			var iRight = iLeft + dObj.offsetWidth - mxRight, iBottom = iTop + dObj.offsetHeight - mxBottom;
			if(iRight > 0) iLeft -= iRight;
			if(iBottom > 0) iTop -= iBottom;
			if(mxLeft > iLeft) iLeft = mxLeft;
			if(mxTop > iTop) iTop = mxTop;
		 }
		dObj.style.left = iLeft + 'px';
		//dObj.style.top = iTop + 'px';
<span style="color: #800000;"><strong>//懒加载方法执行的判断,距离右侧边距多少时进行加载数据</strong></span>
	    if(iLeft>=(document.body.clientWidth*0.7)){
	    	if(tempBool){
	    		searchAjaxAll();
		    	//searchProgramAjax(365,indexR,'','append');
		    	tempBool = false;
	    	}
	    	if(flagLoad){
			   	dObj.style.left = (iLeft-100) + 'px';
	    	}else{
			   	dObj.style.left = iLeft+ 'px';
	    	}
	    }
		onMove();
	};
	function handleMouseDown(oEvent){
			tempBool = true;
		   //清除选择(ie设置捕获后默认带这个)
		   window.getSelection && window.getSelection().removeAllRanges();
		   var oEvent = window.event || arguments[0];
		   dObj.style.position = "absolute"; 
		   iDiffX = oEvent.clientX - dObj.offsetLeft;
		   iDiffY = oEvent.clientY - dObj.offsetTop;
		   zzc.addEvent(document,'mousemove',handleMouseMove);
		   zzc.addEvent(document,'mouseup',handleMouseUp);
		   if(zzc.isIE()){
			  zzc.addEvent(dObj, "losecapture", handleMouseUp);
			  dObj.setCapture();
		   }else{
		  		zzc.addEvent(window, "blur", handleMouseUp);
		   }
     };
	//鼠标松开
	function handleMouseUp(){
		tempBool = false;
	   zzc.removeEvent(document,'mousemove',handleMouseMove);
	   zzc.removeEvent(document,'mouseup',handleMouseUp); 
	   if(zzc.isIE()){
		  zzc.removeEvent(dObj, "losecapture", handleMouseUp);
		  dObj.releaseCapture();
	   }else{
	  	zzc.removeEvent(window, "blur", handleMouseUp);
	   }       
	 };
}
//使图片滚动。
function picSlideByDrag(picBox,picList,dragObj,options){
	  var Options = options || {};
	  var mxLeft = parseInt(Options.mxLeft)||0;//左边限制
	  var mxRight = parseInt(Options.mxRight)||0;//右边限制
	  var mxTop = parseInt(Options.mxTop)||0;//上边限制
	  var mxBottom = mxTop + dragObj.clientHeight;//下边限制
	 function init(){
		  var picListChild = zzc.$$(picList,'li');//li元素个数
		  var picListWidth = picListChild.length * picListChild[0].offsetWidth;//ul加载宽度
//		  if(indexR==0){
//			  dragObj.style.left='225px';
//		  }
		  picList.style.width = picListWidth + 'px';
		  if(picListWidth <= picBox.clientWidth){ //ul中的li元素的总宽度不大于div宽度，滚动条不显示
		  		dragObj.style.display = "none";
		  }else{
			  dragObj.style.display = "block";
		  }
		  
	 };
	 function picSlide(){//图片滑动
	  	picList.style.left = -(((zzc.pageX(dragObj) - mxLeft)/(mxRight-mxLeft-dragObj.clientWidth))*(picList.clientWidth-picBox.clientWidth)) + "px";
	 };
	 
	 init();
	 Drag(dragObj,dragObj,{Limit:true,mxTop:mxTop,mxRight:mxRight,mxBottom:mxBottom,mxLeft:mxLeft,onMove:picSlide});
 
};
//静态页面数据可以用此方法
//window.onload = function(){
//	searchClassify();
//	var picBox = zzc.$("picBox");
//	 var picList = zzc.$("picList");
//	 var scrollBar = zzc.$("scrollBar");
//	 var dragObj = zzc.$("dragObj");
//	 var initTop = zzc.pageY(scrollBar) + 1;
//	 var initLeft = zzc.pageX(scrollBar) + 1;
//	 var initRight = initLeft + scrollBar.clientWidth;
//	 picSlideByDrag(picBox,picList,dragObj,{mxTop:initTop,mxLeft:initLeft,mxRight:initRight});
//}
//动态数据获取用此方法加载计算滚动条的宽度以及其他参数值,主要参数是picBoxid,picListid,scrollBarid,dragObjid
//后面的flag,flag2是页面上具体情况判断加上的,没有去掉是提示看客们可以自己根据需要添加参数
function ScrollLoad(picBoxid,picListid,scrollBarid,dragObjid,flag,flag2){
	var picBox = zzc.$(picBoxid);
	 var picList = zzc.$(picListid);
	 var scrollBar = zzc.$(scrollBarid);
	 var dragObj = zzc.$(dragObjid);
	 var initTop = zzc.pageY(scrollBar) + 1;
	 var initLeft = zzc.pageX(scrollBar) + 1;
	 var initRight = initLeft + scrollBar.clientWidth;
	 flagT=flag;
	 flagLoad=flag2;
	 
	 picSlideByDrag(picBox,picList,dragObj,{mxTop:initTop,mxLeft:initLeft,mxRight:initRight});
}
//懒加载用到的方法体
function searchAjaxAll(){
	indexR +=1;
	searchColumn(inputtime,indexR,type,'append');//具体方法,可以根据需要加多个方法
	}
}

调用上面滚动条加载方法ScrollLoad();的Extjs为

function searchColumn(searchTime,searchContent,type){
	Ext.Ajax.request({
		url: 'action.do',
		params: {name:name,id:id},
		method: 'POST',
		callback: function (options, success, response) {
			if (success) {
				var responseJson = Ext.JSON.decode(response.responseText);
				if(responseJson.message.length>0){
					//$('#picList').removeClass('class_ul');
					//$('#dragObj').css('left',document.body.clientWidth*0.19);
					//$('#picList').css('left','0px');
//上面注释掉的部分是具体页面应用中产生问题的解决方法,供参考,当然没有最好啦
					fillTableshh('picList_Column',responseJson.message,type);
				}
				ScrollLoad('picBox','picList','scrollBar','dragObj','3',flag);
			} else {
				Ext.Msg.confirm('失败','请求超时或网络故障,错误编号：[' + response.status + ']是否要重新发送？', function (btn) {
					if (btn == 'yes') {
						Ext.Ajax.request(options);
					}
				});
			}
		}
	});
}

页面具体:

<div id="picBox" class="picBox">
    <ul id="picList" class="picList">			
    </ul>
</div>
<div id="scrollBar" class="scrollBar"><div id="dragObj" class="dragObj"></div></div>

css样式

.picBox{border: 1px solid #f5f1f1;
    height: 110px;
    margin: -10px auto 5px;
    min-width: 700px;
    overflow: hidden;
    padding: 5px;
    position: relative;
    width: 70%;}
.picBox ul{overflow:hidden;position:absolute; top:4px; left:0;}
.picBox li{float: left;
    height: 114px;
    line-height: 95px;
    text-align: center;
    width: 115px;/*
    background:url(../img/loading_big.jpg) no-repeat center;*/}
.picBox li a{ display:block; width:115px; height:100%; margin:0 auto;text-align:center;overflow:hidden;
						position:relative;}
.picBox li a p{ position: absolute;color: #978f8f; top: 102px; width: 115px;  line-height: 12px;font-size: 12px;overflow: hidden; }
.picBox li a:HOVER p{ overflow:visible;
			color:#6885d2;font-size:12px;text-decoration: none;}
.scrollBar{background-color: #ccc;
    border: medium none;
    border-radius: 5px;
    height: 10px;
    margin: 0 auto;
    min-width: 720px;
    width: 74%;}
.scrollBar .dragObj{ width:100px; height:10px;border-radius: 5px; text-align:center; cursor:pointer; background:#6882ca}

整个流程大概就是这样的,此滚动条不足之处是没有滚动轮滑动的方法,不过网上很多,需要的话可以百度哈