css層滾動條_經驗交流-css教學-PHP中文網

首頁

web前端

css教學

css層滾動條_經驗交流

PHP中文网

May 16, 2016 pm 12:06 PM

css層滾動條_經驗交流

<html> 
<head><title>层滚动条DIY - Powered by yexj00</title> 
<style> 
<!-- 
*{ font-size: 12px} 
--> 
</style> 

<script language="Javascript"> 
<!-- 
 function $(obj){ 
return document.all[obj]; 
 } 
 function setbarHeight(){  
$("scroll_bar").style.height=($("scroll_content").clientHeight)/($("scroll_content").scrollHeight)*
($("scroll_area").offsetHeight)+"px"; 
if($("scroll_bar").offsetHeight>=$("scroll_area").offsetHeight){ 
$("scroll_bar").style.display='none'; 
  } 
 } 
//--> 
</script> 

<script language="Javascript"> 
<!-- 
var drag=false; //是否允许拖动 
var mx,my; 
var scrollbar_L; 
var scrollbar_T; 
var scrollbar_W; 
var scrollbar_H; 
var scrollarea_T,scrollarea_H; 
var startT,startY; 

function getInfor(){ 
mx=event.clientX+document.documentElement.scrollLeft; 
my=event.clientY+document.documentElement.scrollTop;  
scrollbar_L=document.documentElement.clientLeft+$("outerDiv").
style.pixelLeft+$("scroll_area").offsetLeft+$("scroll_bar").offsetLeft; 
scrollbar_T=document.documentElement.clientTop+$("outerDiv").
style.pixelTop+$("scroll_area").offsetTop+$("scroll_bar").offsetTop; 
scrollbar_W=$("scroll_bar").offsetWidth; 
scrollbar_H=$("scroll_bar").offsetHeight; 
scrollarea_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop; 
scrollarea_H=$("scroll_area").offsetHeight; 
} 

function dragit(){ 
getInfor(); 

if(event.srcElement.id=="scroll_bar"){ 
  drag=true; 
  $("scroll_bar").style.background="#cccccc"; 
  startT=$("scroll_bar").style.pixelTop; 
  startY=event.clientY; 
 document.onmousemove=move; 
   } 
 } 
function move(){ 
if(drag==true){ 
$("scroll_bar").style.pixelTop=startT+event.clientY-startY; 
$("scroll_content").scrollTop=$("scroll_bar").style.pixelTop/$("scroll_area").
offsetHeight*$("scroll_content").scrollHeight; 
if($("scroll_bar").style.pixelTop<=0){ $("scroll_bar").style.pixelTop=0} 
if($("scroll_bar").style.pixelTop>=(scrollarea_H-scrollbar_H)){  

$("scroll_bar").style.pixelTop=scrollarea_H-scrollbar_H; 
 } 
return false; 
   } 

 } 

document.onmousedown=dragit; 
document.onmouseup=new Function("drag=false;$('scroll_bar').style.background='#efefef'"); 
//--> 
</script> 
</head> 
<body onload="setbarHeight()"> 
<div id="outerDiv" style="position:absolute; left:100px; top:50px; width:130px; height:130px"> 
  <div id="scroll_content" style="position:absolute; padding:2px; left:2px; top:5px; width:100px; 
  height:100px; border:1px solid #cccccc; overflow: hidden"> 

<!-- 这是层的内容区 --> 
<script language="Javascript"> 
<!-- 
var str="这个是用层做的滚动条,Powered by yexj00!"; 
str=str.split(""); 
for(i=0;i<str.length;i++){ 
document.write(str[i]+" <br>"); 
 } 
//--> 
</script> 
<!-- 层的内容区结束 --> 

  </div> 
  <div id="up_btt" style="position:absolute; left:104px; top:5px; width:8px; height:16px; background:#efefef; 
  font-size:0px;border:1px outset #cccccc"></div> 
  <div id="scroll_area" style=" position:absolute; left:104px; top:22px; width:8px; height:66px;font-size:0px; 
  background:#efefef"> 
      <div id="scroll_bar" style="position:absolute; left:0px; top:0px; width:8px; background:#efefef; 
      font-size:0px;border:1px outset #cccccc"></div> 
  </div> 
  <div id="down_btt" style="position:absolute; left:104px; top:89px; width:8px; height:16px; 
  background:#efefef;font-size:0px; border:1px outset #cccccc"></div> 
</div> 

</body> 
</html>

登入後複製

以上就是css層滾動條_經驗交流的內容，更多相關內容請關注php中文網（www.php.cn）！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7488

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。