이번에는 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) 방패 선택, 마우스 오른쪽 버튼 클릭 등
<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='a' class="TopDIV"> 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ </div> <div id='b' class="LeftDIV"> 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ </div> <div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;" class="MainDIV"> 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ </div> </body> </html>
입력 텍스트 상자 및 img 확인 코드 구현 방법
html 마우스 호버 프롬프트 구현 방법 레이블 콘텐츠
트리거 메서드를 사용하여 클릭하지 않고 파일 형식 입력을 얻는 방법 파일 선택 대화 상자가 나타납니다
위 내용은 HTML에서 스크롤 막대를 사용하기 위한 팁은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!