HTML_HTML/Xhtml_웹 페이지 제작 시 스크롤 막대 사용 팁 공유-HTML 튜토리얼-php.cn

오늘 Beef Brisket 보도 자료 시스템을 공부할 때 Mr. Beef Bristle은 스크롤 막대에 대한 지식에 대해 이야기했지만 스크롤 막대에 대한 지식 중 일부만 다루었습니다. 깊이 있는 지식만으로는 부족합니다. 지식 모든 사람에게 공통적으로 나타나는 현상, 즉 웹페이지에서 무언가를 삭제할 때 스크롤바가 발생한다는 것을 말씀드리고 싶습니다. 매우 비인간적인 방식으로 페이지 상단으로 실행하는 대신 항목을 삭제하기 전의 위치에 있는 경우가 많습니다. 실제로 방법은 매우 간단합니다.maintainScrollPositionOnPostback = " true"를 .aspx 소스 코드의 상단 부분에 추가합니다. 아래 그림을 참조하세요. 브리스킷 보도자료 시스템을 학습할 때 위와 같은 현상이 발생했습니다. HTML 스크롤 막대 사용에 대한 다른 팁을 알려드리겠습니다. (1) 스크롤 막대 숨기기 (2) 셀이나 레이어에 스크롤 막대를 표시하는 방법 (3)javascript는 색상을 변경하거나 플랫으로 변경하는 등 프레임의 스크롤 막대 스타일을 변경합니다. 효과 등 BODY {SCROLLBAR-FACE-COLOR: #ffcc99; SCROLLBAR-HIGHLIGHT-COLOR: #ff0000; 🎜> 스크롤바-3DLIGHT-COLOR: #000000; 스크롤바-화살표-색상: #ff0000; 스크롤바-TRACK-COLOR: #dee0ed; #ffff00;} &lt ;/STYLE>

설명:

scrollbar-3dlight-color:color; 스크롤 막대의 밝은 테두리 색상을 설정하거나 검색합니다. scrollbar-highlight-color:color; 또는 스크롤 막대를 검색합니다. 스크롤 막대 3D 인터페이스의 밝은 가장자리 색상 scrollbar-face-color:color; 스크롤 막대 3D 표면의 색상을 설정하거나 검색합니다. scrollbar-arrow-color:color; 스크롤 막대 방향 화살표의 색상을 설정하거나 검색합니다. 스크롤 막대가 표시되지만 사용할 수 없는 경우 이 속성은 유효하지 않습니다. scrollbar-shadow-color:color; ; scrollbar-darkshadow-color:color; 스크롤 막대의 어두운 테두리 색상을 설정하거나 검색합니다. scrollbar-base-color:color; 다른 인터페이스 색상은 이에 따라 자동으로 조정됩니다. scrollbar-track-color:color; 스크롤 막대의 드래그 영역 색상을 설정하거나 검색합니다.

참고:

color는 설정하려는 색상 코드이며 16진수일 수 있습니다. #FF0000과 같은 는 rgb(255,0,255)와 같이 RGB로 표현될 수 있습니다. 스크롤 막대 스타일을 설정할 때 이를 적용하기 위해 모든 속성을 사용할 필요는 없습니다. (4) 자바스크립트에서 페이지 요소 위치 지정 clientX, clientY는 웹 페이지를 기준으로 마우스의 현재 위치입니다. 마우스가 페이지의 왼쪽 상단에 있을 때 clientX=0, clientY입니다. =0; offsetX, offsetY는 마우스입니다. 웹 페이지의 특정 영역을 기준으로 한 현재 위치입니다. 마우스가 페이지에서 이 영역의 왼쪽 상단에 있을 때 offsetX=0, offsetY=0; screenX, screenY는 사용자의 전체 화면을 기준으로 한 마우스의 위치입니다. x, y는 현재 브라우저를 기준으로 한 마우스의 현재 위치입니다. scrollLeft: 왼쪽 사이의 거리를 설정하거나 가져옵니다. 개체의 가장자리와 창에 현재 표시되는 콘텐츠의 가장 왼쪽 끝(스크롤 막대 생성으로 인해 현재 페이지의 내용이 불확실함을 알 수 있음). scrollTop: 개체 상단과 창에 표시되는 콘텐츠 상단 사이의 거리를 설정하거나 가져옵니다. 왼쪽: 페이지를 기준으로 한 개체의 X 좌표입니다. top: 페이지를 기준으로 한 개체의 Y 좌표 (5) Shield 선택, 마우스 오른쪽 버튼 클릭 등 다음은 폼의 크기에 따라 스크롤바를 자동으로 설정하는 작은 예시입니다

코드 복사 코드는 다음과 같습니다. .TopDIV { 위치:절대; 왼쪽:130px; 상단:10px; 너비:105; 높이:30; 오버플로-x:숨김; 오버플로-y:자동; 플로트: 오른쪽; 테두리 스타일.:단색; 테두리 너비:; 테두리 색상:빨간색 } .왼쪽DIV { 위치:절대; 왼쪽:10px; 상단:40px; 너비:120; 높이:60; 오버플로-x:숨김; 오버플로-y:숨김; 플로트: 오른쪽; 테두리 스타일.:단색; 테두리 너비:; 테두리 색상:노란색 } .MainDIV { 위치:절대; 왼쪽:130px; 상단:40px; 너비:120;; 높이:80; 오버플로-x:자동; 오버플로-y:자동; 플로트: 오른쪽; 테두리 스타일.:단색; 테두리 너비:; 테두리 색상:파란색 } 함수 setStyle() { //145의 유형LeftDiv의 왼쪽 너비 15(15是滚动条적 크기) document.getElementById("a").style.width=document. body.clientWidth - 145; //130개의 왼쪽 Div 왼쪽 너비 document.getElementById("c").style.width=document.body.clientWidth - 130; //40의 TopDIV 상단 높이 document.getElementById("c").style.height=document.body.clientHeight - 40; } 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 4234567890ABCDEFGHIJKLM NOPQRSTUVWXYZ 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 8234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 22 34567890ABCDEFGHIJKLMNOPQRSTUVWXYZ class="MainDIV"> 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 4234567890ABCDEFGHIJKLM NOPQRSTUVWXYZ 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 8234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 22 34567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

스크롤바의 사용은 매우 흔한 일이고 그에 관련된 지식도 꽤 많이 있습니다. 계속해서 배우고 정리해서 학습능력과 학습효율이 어느 정도 향상될 수 있었으면 좋겠습니다. .