`

给DIV加滚动条

 
阅读更多 
<!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-Type" content="text/html; charset=gb2312" />
<title>带滚动条的Div</title>
	<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	p{
		margin-top:0px;
	}
	#dhtmlgoodies_scrolldiv{
		width:530px;
		height:500px;
	}
	#scrolldiv_parentContainer{
		width:500px;
		height:100%;
		overflow:hidden;
		border:1px solid #BC8FBD;
		float:left;
		position:relative;
	}
		#scrolldiv_content{
		padding: 5px;
		position:relative;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size: 0.9em;
		line-height:130%;
		color: #333;
	}
	
		#scrolldiv_slider{
		width:15px;
		margin-left:2px;
		height:500px;
		float:left;
	}
	
		#scrolldiv_scrollbar{
		width:15px;
		height:460px;
		border:1px solid #BC8FBD;
		position:relative;
		
	}
		#scrolldiv_theScroll{
		margin:1px;
		width:13px;
		height:13px;
		background-color:#BC8FBD;
		position:absolute;	
		top:0px;
		left:0px;
		cursor:pointer;
	}
		#scrolldiv_scrollUp,#scrolldiv_scrollDown{
		width:15px;
		height:16px;
		border:1px solid #BC8FBD;
		color: #BC8FBD;
		text-align:center;
		font-size:16px;
		line-height:16px;
		cursor:pointer;
	}
	#scrolldiv_scrollUp{
		margin-bottom:2px;
	}
	#scrolldiv_scrollDown{
		margin-top:2px;
	}
	#scrolldiv_scrollDown span,#scrolldiv_scrollUp span{
		font-family: Symbol;
	}

	</style>
	<script type="text/javascript">
	var contentHeight = 0;
	var visibleContentHeight = 0;	
	var scrollActive = false;
	var scrollHandleObj = false;
	var scrollHandleHeight = false;
	var scrollbarTop = false;
	var eventYPos = false;
	var scrollbuttonActive = false;
	var scrollbuttonDirection = false;
	var scrollbuttonSpeed = 2;
	var scrollTimer = 10;	
	var scrollMoveToActive = false;
	var scrollMoveToYPosition = false;
	function scrollDiv_startScroll(e)
	{
		if(document.all)e = event;
		scrollbarTop = document.getElementById('scrolldiv_theScroll').offsetTop;
		eventYPos = e.clientY;
		scrollActive = true;
	}
	
	function scrollDiv_stopScroll()
	{
		scrollActive = false;
		scrollbuttonActive = false;
		scrollMoveToActive = false;
	}
	function scrollDiv_scroll(e)
	{
		if(!scrollActive)return;
		if(document.all)e = event;
		if(e.button!=1 && document.all)return;
		var topPos = scrollbarTop + e.clientY - eventYPos; 
		if(topPos<0)topPos=0;
		if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1)topPos = visibleContentHeight-(scrollHandleHeight+4);
		document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
		document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' 
	}
	function scrolldiv_scrollMoveToInit(e)
	{		
		if(document.all)e = event;
		scrollMoveToActive = true;
		scrollMoveToYPosition = e.clientY - document.getElementById('scrolldiv_scrollbar').offsetTop;
		if(document.getElementById('scrolldiv_theScroll').offsetTop/1 > scrollMoveToYPosition) scrollbuttonDirection = scrollbuttonSpeed*-2; else  scrollbuttonDirection = scrollbuttonSpeed*2;
		scrolldiv_scrollMoveTo();	
	}
	
	function scrolldiv_scrollMoveTo()
	{
		if(!scrollMoveToActive || scrollActive)return;
		var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px','');
		topPos = topPos/1 + scrollbuttonDirection;
		if(topPos<0){
			topPos=0;
			scrollMoveToActive=false;
		}
		if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){
			topPos = visibleContentHeight-(scrollHandleHeight+4);	
			scrollMoveToActive=false;
		}
		if(scrollbuttonDirection<0 && topPos<scrollMoveToYPosition-scrollHandleHeight/2)return;	
		if(scrollbuttonDirection>0 && topPos>scrollMoveToYPosition-scrollHandleHeight/2)return;			
		document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
		document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' 		
		setTimeout('scrolldiv_scrollMoveTo()',scrollTimer);		
	}
	
	function cancelEvent()
	{
		return false;			
	}

	function scrolldiv_scrollButton()
	{
		if(this.id=='scrolldiv_scrollDown')scrollbuttonDirection = scrollbuttonSpeed; else scrollbuttonDirection = scrollbuttonSpeed*-1;
		scrollbuttonActive=true;
		scrolldiv_scrollButtonScroll();
	}
	function scrolldiv_scrollButtonScroll()
	{
		if(!scrollbuttonActive)return;
		var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px','');
		topPos = topPos/1 + scrollbuttonDirection;
		if(topPos<0){
			topPos=0;
			scrollbuttonActive=false;
		}
		if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){
			topPos = visibleContentHeight-(scrollHandleHeight+4);	
			scrollbuttonActive=false;
		}	
		document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
		document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' 			
		setTimeout('scrolldiv_scrollButtonScroll()',scrollTimer);
	}
	function scrolldiv_scrollButtonStop()
	{
		scrollbuttonActive = false;
	}
	
	
	function scrolldiv_initScroll()
	{
		visibleContentHeight = document.getElementById('scrolldiv_scrollbar').offsetHeight ;
		contentHeight = document.getElementById('scrolldiv_content').offsetHeight - visibleContentHeight;			scrollHandleObj = document.getElementById('scrolldiv_theScroll');
		scrollHandleHeight = scrollHandleObj.offsetHeight;
		scrollbarTop = document.getElementById('scrolldiv_scrollbar').offsetTop;		
		document.getElementById('scrolldiv_theScroll').onmousedown = scrollDiv_startScroll;
		document.body.onmousemove = scrollDiv_scroll;
		document.getElementById('scrolldiv_scrollbar').onselectstart = cancelEvent;
		document.getElementById('scrolldiv_theScroll').onmouseup = scrollDiv_stopScroll;
		if(document.all)document.body.onmouseup = scrollDiv_stopScroll; else
document.documentElement.onmouseup = scrollDiv_stopScroll;
		document.getElementById('scrolldiv_scrollDown').onmousedown = scrolldiv_scrollButton;
		document.getElementById('scrolldiv_scrollUp').onmousedown = scrolldiv_scrollButton;
		document.getElementById('scrolldiv_scrollDown').onmouseup = scrolldiv_scrollButtonStop;
		document.getElementById('scrolldiv_scrollUp').onmouseup = scrolldiv_scrollButtonStop;
		document.getElementById('scrolldiv_scrollUp').onselectstart = cancelEvent;
		document.getElementById('scrolldiv_scrollDown').onselectstart = cancelEvent;
		document.getElementById('scrolldiv_scrollbar').onmousedown = scrolldiv_scrollMoveToInit;
	}
	function scrolldiv_setColor(rgbColor)
	{
		document.getElementById('scrolldiv_scrollbar').style.borderColor = rgbColor;
		document.getElementById('scrolldiv_theScroll').style.backgroundColor = rgbColor;
		document.getElementById('scrolldiv_scrollUp').style.borderColor = rgbColor;
		document.getElementById('scrolldiv_scrollDown').style.borderColor = rgbColor;
		document.getElementById('scrolldiv_scrollUp').style.color = rgbColor;
		document.getElementById('scrolldiv_scrollDown').style.color = rgbColor;
		document.getElementById('scrolldiv_parentContainer').style.borderColor = rgbColor;
	}

	function scrolldiv_setWidth(newWidth)
	{
		document.getElementById('dhtmlgoodies_scrolldiv').style.width = newWidth + 'px';
		document.getElementById('scrolldiv_parentContainer').style.width = newWidth-30 + 'px';		
	}
	
	function scrolldiv_setHeight(newHeight)
	{
		document.getElementById('dhtmlgoodies_scrolldiv').style.height = newHeight + 'px';
		document.getElementById('scrolldiv_parentContainer').style.height = newHeight + 'px';
		document.getElementById('scrolldiv_slider').style.height = newHeight + 'px';
		document.getElementById('scrolldiv_scrollbar').style.height = newHeight-40 + 'px';		
	}
	function setSliderBgColor(rgbColor)
	{
		document.getElementById('scrolldiv_scrollbar').style.backgroundColor = rgbColor;
		document.getElementById('scrolldiv_scrollUp').style.backgroundColor = rgbColor;
		document.getElementById('scrolldiv_scrollDown').style.backgroundColor = rgbColor;
	}
	function setContentBgColor(rgbColor)
	{
		document.getElementById('scrolldiv_parentContainer').style.backgroundColor = rgbColor;
	}
	function setScrollButtonSpeed(newScrollButtonSpeed)
	{
		scrollbuttonSpeed = newScrollButtonSpeed;
	}
	function setScrollTimer(newInterval)
	{
		scrollTimer = newInterval;
	}
	
	</script>

</head>
<body>
<div id="dhtmlgoodies_scrolldiv">
<div id="scrolldiv_parentContainer">
	<div id="scrolldiv_content">这是一个DIV层，加入了一个滚动条功能，当超出范围的时候便会自动出现，你可以拖动滚动条看看效果哦。<br>
	</div>
	</div>
	<div id="scrolldiv_slider">
	<div id="scrolldiv_scrollUp"><img src="http://www.codefans.net/jscss/demoimg/200905/arrow_up.gif"></div>
	<div id="scrolldiv_scrollbar">
	<div id="scrolldiv_theScroll"><span></span></div>
	</div>
	<div id="scrolldiv_scrollDown"><img src="http://www.codefans.net/jscss/demoimg/200905/arrow_down.gif"></div>
	</div>
</div>
<script type="text/javascript">
scrolldiv_setColor('#317082');
setSliderBgColor('#E2EBED');
setContentBgColor('#FFFFFF');
setScrollButtonSpeed(1);
setScrollTimer(5);
scrolldiv_setWidth(450);
scrolldiv_setHeight(400);
scrolldiv_initScroll();
</script>
</body>
</html>

 

分享到：
| js 要求实现只能输入数字小数点、其他输入 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div滚动条 带滚动条的div div滚动条样式

    DIV 滚动条样式详解 在 HTML 中，我们经常需要在 DIV 元素中添加滚动条，以便在内容超出 DIV 区域时，能够滚动查看内容。这篇文章将详细介绍如何使用 CSS 样式表来实现 DIV 滚动条的样式设置。 什么是 DIV 滚动条...

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计，常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，...

    给div加滚动条 div显示滚动条设置代码

    在前端开发中，给div元素添加滚动条是一种常见的操作，它能够提供滚动内容的视图，类似于文本编辑区域textarea。在添加滚动条之前，开发者需要注意为div元素设置高度和宽度，否则滚动条可能不会正确显示。 要给div...

    div随滚动条上下滚动

    在网页设计中，"div随滚动条上下滚动"是一种常见的动态效果，通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现，以增加用户体验，使某些元素如导航栏、侧...

    div滚动条优化

    "div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下，通过CSS样式和JavaScript技术来美化或定制滚动条，使其更加符合现代网页的审美标准和用户体验需求。 首先，我们要了解默认滚动条的样式通常是浏览器...

    jQuery实现将div的滚动条滚动到指定位置

    在网页开发中，jQuery是一个非常...总的来说，通过jQuery的`animate()`方法，我们可以轻松地实现div滚动条的动态控制，为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。

    Android手机版浏览器DIV滚动条失效解决方案

    在Android平台上，开发一款手机版浏览器时，可能会遇到一个常见的问题：在特定情况下，网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...

    div 加滚动条 多样式

    本文将深入探讨如何在`div`中添加滚动条，并展示几种不同的样式化滚动条的方法。 首先，让我们了解如何在`div`中启用滚动条。这可以通过CSS来实现。默认情况下，浏览器会在需要时自动显示滚动条，但我们可以用以下...

    一款好看的DIV+CSS滚动条

    标题提及的"一款好看的DIV+CSS滚动条"是指利用这种方法创建的自定义滚动条，它可以提升网站的用户体验和视觉吸引力。 滚动条通常在内容超过容器显示范围时出现，允许用户浏览隐藏的部分。在默认情况下，浏览器会...

    给DIV添加滚动条的实现代码

    DIV 滚动条实现代码详解 在 HTML 中，我们经常需要为 DIV 添加滚动条，以便在页面空间有限的情况下显示大量内容。今天，我们将探讨如何为 DIV 添加滚动条，并了解相关的 CSS 属性和值。 基本实现 要为 DIV 添加...

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    DIV滚动悬浮层(滚动条动，层不动)

    通过这种方式，当页面滚动时，悬浮层会根据我们的需求进行动态调整，实现"滚动条动，层不动"的效果。 当然，实际的项目可能会更复杂，比如要考虑不同设备的响应式布局，或者添加动画效果等。但以上基础步骤已经涵盖...

    div滚动条样式一览-div+css设计网

    而当这些`div`元素中的内容超出其设定的宽度或高度时，滚动条就会出现，以帮助用户浏览不可见的部分。在本文中，我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式，以提升网页的视觉效果和用户体验。 一、...

    jqueryDIV滚动条

    jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条

    使用div做滚动条

    所谓DIV滚动条，是指在一个固定宽度和高度的`&lt;div&gt;`元素内部添加垂直或水平滚动条，以便于显示超出该区域的内容。这种方法非常适合于在网页上展示大量文本、图片或列表等信息时使用，能够在不增加页面整体尺寸的情况...

    让div滚动条初始化到最低位置的三种方法

    ### 让div滚动条初始化到最低位置的三种方法 在前端开发中，有时我们需要实现一个功能，即在向某个特定的`div`容器内添加新内容后，使该`div`的滚动条自动滚动到最底部，以确保新添加的内容能够立即呈现在用户的...

    jquery使用div实现滚动条效果

    本篇文章将详细讲解如何利用jQuery实现一个div元素的滚动条效果，以及涉及到的相关知识点。 首先，我们需要理解滚动条的基本概念。滚动条是当内容超出容器显示范围时出现的一种用户界面元素，允许用户查看或浏览不...

    利用div+jquery自定义滚动条

    在这里，`div`可以作为我们需要自定义滚动条的容器，通过设置`overflow`属性来控制内容超出时是否显示滚动条。例如，如果想让div在内容过多时显示横向滚动条，可以这样设置CSS样式： ```css div.scroll-container {...

    为div添加滚动条.html

    为div添加滚动条 html 欢迎下载

Magicbox
Global site tag (gtag.js) - Google Analytics