집 > 기사 > 웹 프론트엔드 > HTML에서 스크롤 막대를 사용하기 위한 팁은 무엇입니까?

HTML에서 스크롤 막대를 사용하기 위한 팁은 무엇입니까?

php中世界最好的语言원래의: 2018-02-12 10:15:342718검색

이번에는 HTML의 스크롤 막대 사용에 대한 몇 가지 팁과 HTML의 스크롤 막대 사용에 대한 몇 가지 참고 사항을 소개하겠습니다. 다음은 실제 사례입니다.

웹페이지에서 무언가를 삭제할 때 스크롤바가 페이지 상단까지 올라가지 않고 삭제되기 전의 위치에 머물러 있는 경우가 흔한 현상이라고 할 수 있는데, 이는 매우 비인간적인 현상입니다. 실제로 방법은 매우 간단합니다. .aspx 소스 코드의 상단에 MaintenanceScrollPositionOnPostback = "true"를 추가하면 됩니다.
Beef Brisket 뉴스 릴리스 시스템을 학습할 때 위와 같은 현상이 발생했습니다. HTML 스크롤 막대 사용에 대한 다른 팁을 알려드리겠습니다.
(1) 스크롤 막대 숨기기

<bodystyle="
overflow-x
:hidden;overflow-y:hidden">

(2) 셀에 스크롤 막대를 추가하는 방법 또는 레이어에 스크롤 막대가 나타납니다

<divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>

(3) JavaScript는 색상 변경, 평면 효과 변경 등 프레임의 스크롤 막대 스타일을 변경합니다.

<STYLE> 
BODY {SCROLLBAR-FACE-COLOR: #ffcc99; 
SCROLLBAR-HIGHLIGHT-COLOR: #ff0000; 
SCROLLBAR-SHADOW-COLOR: #ffffff; 
SCROLLBAR-3DLIGHT-COLOR: #000000; 
SCROLLBAR-ARROW-COLOR: #ff0000; 
SCROLLBAR-TRACK-COLOR: #dee0ed; 
SCROLLBAR-DARKSHADOW-COLOR: #ffff00;} 
</STYLE>

지침:
scrollbar- 3dlight-color: 스크롤 막대 강조 테두리 색상을 설정하거나 검색합니다.
scrollbar-highlight-color:color; 스크롤 막대 3D 인터페이스의 강조 색상을 설정하거나 검색합니다. 또는 스크롤 막대 3D 표면의 색상을 검색합니다.
scrollbar- arrow-color:color; 스크롤 막대가 표시되지만 사용할 수 없는 경우 이 속성은 유효하지 않습니다. -color:color; 스크롤 막대 3D 인터페이스의 어두운 가장자리 색상을 설정하거나 검색합니다.
scrollbar-darkshadow-color:color; 스크롤 막대의 어두운 테두리 색상을 설정하거나 검색합니다. 스크롤 막대 기본 색상. 다른 인터페이스 색상은 이에 따라 자동으로 조정됩니다.
scrollbar-track-color:color; 스크롤 막대의 드래그 영역 색상을 설정하거나 검색합니다.
설명:
color는 설정하려는 색상 코드로, #FF0000과 같이 16진수로 표시될 수 있습니다. 예를 들어 rgb(255,0,255); 스크롤 막대 스타일을 설정할 때 이를 적용하기 위해 모든 속성을 사용할 필요는 없습니다.
(4) JavaScript에서 페이지 요소 위치 지정
clientX, clientY는 웹페이지를 기준으로 한 마우스의 현재 위치입니다. 마우스가 페이지의 왼쪽 상단에 있을 때 clientX=0, clientY=0; , offsetY는 웹페이지를 기준으로 한 마우스의 현재 위치입니다. 마우스가 페이지의 왼쪽 상단에 있을 때 offsetX=0, offsetY=0
screenX, screenY;
x, y는 현재 브라우저 위치를 기준으로 한 마우스의 현재 위치입니다.
scrollLeft: 개체의 왼쪽 가장자리와 개체의 가장 왼쪽 끝 사이의 거리를 설정하거나 가져옵니다. 창에 현재 표시되는 콘텐츠(스크롤 막대 생성으로 인해 페이지에 현재 표시되는 콘텐츠가 불확실함)
scrollTop: 개체 상단과 창에 표시되는 콘텐츠 상단 사이의 거리를 설정하거나 가져옵니다.
왼쪽: 페이지를 기준으로 한 개체의 X 좌표입니다.
top: 페이지를 기준으로 한 개체의 Y 좌표
(5) 방패 선택, 마우스 오른쪽 버튼 클릭 등
e7c15a6d2a6eef7f0c3cd4b67aaf994b 예제는 스크롤을 구현하는 것입니다. 폼의 크기에 따라 막대가 자동으로 설정됩니다

<SPAN style="FONT-SIZE: 18px"><html> 
<head> 
<style type="text/css"> 
  .TopDIV 
  {  
     position:absolute; 
     left:130px; 
     top:10px; 
     width:105; 
     height:30; 
     overflow-x:hidden; 
     overflow-y:auto; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:red 
  } 
  .LeftDIV 
  {  
     position:absolute; 
     left:10px; 
     top:40px; 
     width:120; 
     height:60; 
     overflow-x:hidden; 
     overflow-y:hidden; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:yellow 
  } 
  .MainDIV 
  {  
     position:absolute; 
     left:130px; 
     top:40px; 
     width:120;; 
     height:80; 
     overflow-x:auto; 
     overflow-y:auto; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:blue 
  } 
</style> 
<script type="text/javascript" language="javascript"> 
function setStyle() 
{ 
//145的由来LeftDiv的left+width+15（15是滚动条的宽度） 
document.getElementById("a").style.width=document.body.clientWidth - 145; 
//130的由来LeftDiv的left+width 
document.getElementById("c").style.width=document.body.clientWidth - 130; 
//55的由来TopDIV的top+height+15（15是滚动条的宽度） 
document.getElementById("b").style.height=document.body.clientHeight - 55; 
//40的由来TopDIV的top+height 
document.getElementById("c").style.height=document.body.clientHeight - 40; 
} 
</script> 
  
</head> 
<body onresize="setStyle();" onLoad="setStyle();"> 
  
<div id=&#39;a&#39; class="TopDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
  
<div id=&#39;b&#39; class="LeftDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
<div id=&#39;c&#39; onscroll="document.getElementById(&#39;b&#39;).scrollTop = this.scrollTop;document.getElementById(&#39;a&#39;).scrollLeft = this.scrollLeft;" 
 class="MainDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
</body> 
</html>

스크롤 막대의 사용은 매우 일반적이며 관련 지식이 꽤 많이 있습니다. 계속해서 배울 수 있기를 바랍니다.
이 사례를 읽으신 후 방법을 익히셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP에 있는 다른 관련 기사를 주목하세요. 중국사이트!