拖拽+自定义滚动条

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>拖拽+滚动条</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
	*{margin:0; padding: 0;}
	body{font-family:14px/100% "microsoft yahei"; }
	#f-wrap{width: 1000px; margin: 0 auto; padding: 10px; border:1px dotted green;}
	#box{width:820px; padding-right:12px; height:500px; border:1px solid #ccc; overflow: hidden; position: relative;}
	/*内容区*/
	#cnt{width:800px; line-height:24px; position:absolute; padding:10px; background-color:#fff;}
	/*滚动条*/
	#scrollBd{width:12px; height:500px; background-color:#ddd; position:absolute; top:0; right:0;}
	#scrollBar{width:12px; height:50px; background-color:#aaa; position: absolute; cursor: pointer; -webkit-border-radius:12px; -moz-border-radius:12px; -o-border-radius:12px; border-radius:12px;}
</style>
<script type="text/javascript">
	window.onload= function(){
		var oWrap = document.getElementById('f-wrap'),
			oScroll = document.getElementById('scrollBd'),
			oBar = document.getElementById('scrollBar'),
			oBox = document.getElementById('box'),
			oCnt = document.getElementById('cnt');

		// 点击执行
		oBar.onmousedown = function(e){
			var e = e||event;
			var disY = e.clientY - oBar.offsetTop;
			if(oBar.setCapture){
				oBar.onmousemove = fnMove;
				oBar.onmouseup = fnUp;
				oBar.setCapture();
			}else{
				document.onmousemove = fnMove;
				document.onmouseup = fnUp;
			}

			// 移动
			function fnMove(e){
				var e = e||event;
				var t = e.clientY - disY;
				setTop(t);
			}

			// 弹起
			function fnUp(){
				this.onmousemove = null;
				this.onmouseup = null;
				if(this.releaseCapture){
					this.releaseCapture();
				}
			}
			return false;
		}
		// 滚动
		function fnWheel(e){
			var e = e||event;
			var flag =true;
			flag = e.wheelDelta ? e.wheelDelta<0 : e.detail>0;
			if(flag){
				setTop(oBar.offsetTop+10);
			}else{
				setTop(oBar.offsetTop-10)
			}
			if(e.preventDefault){
				e.preventDefault();
			}
			return false;
		}
		addEvent(oWrap,'mousewheel',fnWheel);
		addEvent(oWrap,'DOMMouseScroll',fnWheel);

		function setTop(t){
			if(t<=0){
				t=0;
			}else if(t >= oScroll.offsetHeight - oBar.offsetHeight){
				t = oScroll.offsetHeight - oBar.offsetHeight;
			}
			oBar.style.top = t +'px';
			// 滑块所占比例
			var scale = t/(oScroll.offsetHeight - oBar.offsetHeight);

			oCnt.style.top = -(oCnt.offsetHeight - box.offsetHeight) * scale + 'px';
			document.title= scale;
		}
	}

	// 浏览器兼容:封装事件绑定
	function addEvent(obj,sEvent,fn){
		if(obj.attachEvent){
			obj.attachEvent('on'+ sEvent,fn);
		}else{
			obj.addEventListener(sEvent,fn,false);
		}
	}
</script>
</head>
<body>
	<div id="f-wrap">
		<span style="float:right; font-size:20px; color:#999;">可执行区域</span>
	    <div id="box">
	    	<div id="scrollBd">
		    	<div id="scrollBar"></div>
		    </div>
	    	<div id="cnt">
	    		<h2>小苹果</h2>
			    <p>我种下一颗种子</p>
			    <p>终于长出了果实</p>
			    <p>今天是个伟大日子</p>
			    <p>摘下星星送给你</p>
			    <p>拽下月亮送给你</p>
			    <p>让太阳每天为你升起</p><br>
			    <p>变成蜡烛燃烧自己</p>
			    <p>只为照亮你</p>
			    <p>把我一切都献给你</p>
			    <p>只要你欢喜</p>
			    <p>你让我每个明天都</p>
			    <p>变得有意义</p>
			    <p>生命虽短爱你永远</p>
			    <p>不离不弃</p><br>
			    <p>你是我的小呀小苹果儿</p>
			    <p>怎么爱你都不嫌多</p>
			    <p>红红的小脸儿温暖我的心窝</p>
			    <p>点亮我生命的火 火火火火</p>
			    <p>你是我的小呀小苹果儿</p>
			    <p>就像天边最美的云朵</p>
			    <p>春天又来到了花开满山坡</p>
			    <p>种下希望就会收获</p><br>
			    <p>从不觉得你讨厌</p>
			    <p>你的一切都喜欢</p>
			    <p>有你的每天都新鲜</p>
			    <p>有你阳光更灿烂</p>
			    <p>有你黑夜不黑暗</p>
			    <p>你是白云我是蓝天</p><br>
			    <p>春天和你漫步在盛开的 花丛间</p>
			    <p>夏天夜晚陪你一起看 星星眨眼</p>
			    <p>秋天黄昏与你徜徉在 金色麦田</p>
			    <p>冬天雪花飞舞有你 更加温暖</p><br>
			    <p>你是我的小呀小苹果儿</p>
			    <p>怎么爱你都不嫌多</p>
			    <p>红红的小脸儿温暖我的心窝</p>
			    <p>点亮我生命的火 火火火火</p>
			    <p>你是我的小呀小苹果儿</p>
			    <p>就像天边最美的云朵</p>
			    <p>春天又来到了花开满山坡</p>
			    <p>种下希望就会收获</p><br>
			    <p>你是我的小呀小苹果儿</p>
			    <p>怎么爱你都不嫌多</p>
			    <p>红红的小脸儿温暖我的心窝</p>
			    <p>点亮我生命的火 火火火火</p>
			    <p>你是我的小呀小苹果儿</p>
			    <p>就像天边最美的云朵</p>
			    <p>春天又来到了花开满山坡</p>
			    <p>种下希望就会收获</p>
	    	</div>
	    </div>
	</div>
</body>
</html>

拖拽+自定义滚动条

时间: 2024-10-08 04:43:19

拖拽+自定义滚动条的相关文章

vue视频: 自定义指令 &amp;&amp; 拖拽 &amp;&amp; 自定义键盘信息

v-textv-forv-html 指令: 扩展html语法 自定义指令:1. 自定义属性指令: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 // vm.$el }); <div v-red="参数"></div> 指令名称: v-red -> red * 注意: 必须以 v-开头(定义时去掉v-) <!DOCTYPE html> <html lang="en&q

View拖拽 自定义绑定view拖拽的工具类

由于工作需求,需要用到这种处理方法所以我就写了这个 废话不多说先看效果图 接下来就看代码吧 DragDropManager import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.PixelFormat; import android.util.Log; import android.view.Gravity; impo

QT笔记之自定义窗口拖拽移动

1.QT自定义标题栏,拖拽标题栏移动窗口(只能拖拽标题,其他位置无法拖拽) 方法一: 转载:http://blog.sina.com.cn/s/blog_4ba5b45e0102e83h.html .h文件中 1 //自己重新实现拖动操作 2 protected: 3 4 void mouseMoveEvent ( QMouseEvent * event ); 5 6 void mousePressEvent ( QMouseEvent * event ); 7 8 void mouseRele

iPhone手机解锁效果&amp;&amp;自定义滚动条&amp;&amp;拖拽--Clone&amp;&amp;窗口拖拽(改变大小/最小化/最大化/还原/关闭)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

自定义滚动条和拖拽

实现自定义滚动条和拖拽滚动效果 <div class="dropDownMenu"> <ul> <li><a href="#">平缝机</a></li> <li><a href="#">包缝机</a></li> <li><a href="#">绷缝机</a></li&

拖拽和自定义播放器

今天用到了拖拽,这个是在h5中的,拖拽其实拖得是标签,把标签当做一个全局变量,你想拖到哪儿就拖到哪儿,我们知道的标签中的img是默认支持拖拽的,所以不要设置属性,但其他的就要设置一个属性才能实现拖拽: 必须要有draggable=true才能实现. 拖拽一般是结合js使用的,光听意思就知道拖拽是动作了,它有几个注册事件: 1:开始拖拽时,是开始拖拽是的状态: 2:有开始就有结束: 他们两个其实很好记,就一个单词不一样,一个是start一个end,他们本身的意思就是一个开始一个结束的意思. 一般标

使用knockout-sortable实现对自定义菜单的拖拽排序

在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需要说明的是排序的实现. 我们先来看看关键的页面代码: <div class="row"> <div class="col-lg-12 full-width" id="leftMenus"> <div class=&quo

完美拖拽 &amp;&amp;仿腾讯微博效果&amp;&amp; 自定义多级右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

IOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影

隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor]; for (UIView *aView in [webView subviews]) { if ([aView isKindOfClass:[UIScrollView class]]) { [(UIScrollView *)aView setShowsVerticalScrollIndicator:NO]; //右侧的滚动条 (水平的类似) for (UIVi