CSS 레이어 스크롤 바_경험 교환-CSS 튜토리얼-php.cn

집

웹 프론트엔드

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=&#39;none&#39;; 
  } 
 } 
//--> 
</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;$(&#39;scroll_bar&#39;).style.background=&#39;#efefef&#39;"); 
//--> 
</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으로 문의하세요.

관련 기사

드래그 ' 및 Droppin ' 반응에서Apr 17, 2025 am 11:52 AM

React Ecosystem은 모두 드래그 앤 드롭의 상호 작용에 중점을 둔 많은 라이브러리를 제공합니다. 우리는 React-dnd, React-beautiful-dnd를 가지고 있습니다.

빠른 소프트웨어Apr 17, 2025 am 11:49 AM

최근 빠른 소프트웨어에 대해 놀랍도록 상호 연결된 것들이있었습니다.

배경 클립이있는 중첩 된 그라디언트Apr 17, 2025 am 11:47 AM

나는 자주 배경 클립을 사용한다고 말할 수 없습니다. I ' D WART IT IT는 일상적인 CSS 작업에서 거의 사용되지 않았습니다. 그러나 나는 Stefan Judis의 게시물에서 그것을 상기시켰다.

React 후크와 함께 requestAnimationFrame 사용Apr 17, 2025 am 11:46 AM

requestAnimationFrame을 사용하여 애니메이션은 쉬워야하지만 React의 문서를 철저히 읽지 않으면 몇 가지 문제가 발생할 수 있습니다.

페이지 상단으로 스크롤해야합니까?Apr 17, 2025 am 11:45 AM

아마도이를 사용자에게 제공하는 가장 쉬운 방법은 요소의 ID를 대상으로하는 링크 일 것입니다. 그래서 ...처럼 ...

최고 (GraphQL) API는 귀하가 작성한 것입니다Apr 17, 2025 am 11:36 AM

들어보세요, 나는 GraphQL 전문가가 아니지만 함께 일하는 것을 좋아합니다. 프론트 엔드 개발자로서 데이터를 노출시키는 방법은 꽤 멋지다. 메뉴와 같습니다

주간 플랫폼 뉴스 : 텍스트 간격 북마크, 최상위 차단, 새로운 앰프 로딩 표시기Apr 17, 2025 am 11:26 AM

이번 주에 타이포그래피를 검사하기위한 편리한 북마크 인 Roundup, JavaScript 모듈과 Facebook의 Facebook 등을 어떻게 가져 오는지 땜질하기 위해 대기하는 편리한 북마크 인 Roundup과 Facebook의

테두리 반경을 보존하는 동안 상자를 확장하는 다양한 방법Apr 17, 2025 am 11:19 AM

나는 최근 코데 펜에서 흥미로운 변화를 발견했다.

See all articles

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는