이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
