HTML Table의 스크롤바는 가로 및 세로 형식의 데이터를 스크롤하는 기능 중 하나입니다. 기본적으로 세로 모드에서는 데이터 개수를 입력한 후 세로 스크롤 바가 활성화되어 크기를 최대화할 수 있습니다. 그러나 가로 모드에서는 줄 바꿈되지 않고 단락 형식으로 데이터를 입력한 후 페이지에 가로 스크롤 막대에서 데이터를 활성화하는 옵션으로 오른쪽 화살표가 포함됩니다. 마우스 포인터를 사용하여 스크롤 옵션을 사용자 정의했습니다. 스크롤 테이블의 테두리, 높이, 너비를 할당할 수도 있습니다.
HTML 테이블에 스크롤바 만들기
텍스트 상자의 내용이 너무 커서 들어갈 수 없는 경우 HTML 스크롤 상자를 사용하면 상자의 스크롤 막대가 커집니다. 모바일 앱과 같은 일부 애플리케이션은 스크롤 상자를 사용하여 해당 기능을 표시하지만 큰 모바일 화면에서는 일부 작은 모바일 화면 호환성이 양호하게 표시되지만 화면에는 표시되지 않습니다. 즉, 다음에서 사용되는 애플리케이션 기능입니다. 스크롤 상자. 브라우저 화면에서 사용되는 웹 애플리케이션의 일부 기능을 표시하려면 일부 플러그인이 필요합니다. HTML에 스크롤 막대 옵션을 추가하고 "오버플로" 옵션을 사용하며 수평 및 수직 스크롤 막대 추가를 위해 자동 활성화로 설정한다고 가정해 보겠습니다. HTML에 세로 막대 옵션을 추가하려면 파일에 "overflow-y" 줄을 추가하세요.
오버플로:스크롤:
{ Overflow-x:scroll;//add horizontal bar option in html Overflow-y:scroll; //add vertical bar option in html }
로그인 후 복사
<스타일>
태그를 사용하면 HTML 페이지에 스크롤 옵션을 추가하겠습니다.
HTML 테이블의 스크롤바 예
HTML 테이블의 예는 다음과 같습니다.
예시 #1
코드:
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
로그인 후 복사
출력:
위 예에서는 가로 및 세로 막대에서 스크롤을 활성화했습니다. 텍스트가 텍스트 상자 제한을 초과하면 스크롤이 자동으로 활성화됩니다.
예시 #2
코드:
Welcome to my domain
로그인 후 복사
출력:
위의 예에서는
를 사용했습니다. 스크롤 옵션을 사용하여 선택 윤곽 내에 텍스트를 표시합니다. 스크롤 막대의 텍스트에 애니메이션을 적용할 수 있습니다. 다양한
<선택사항>
세트 Faster Scrolling, Faster Bounce, Text 스크롤 다운, Text Scrolling Up, Jumping Text, Normal Speed 등도 사용됩니다.
예시 #3
아래 예에서는 웹 페이지에 픽셀 형식으로 표시되는 데이터의 양에 대한 알림 기능을 사용하겠습니다.
코드:
Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain
alert( getComputedStyle(example).width )
로그인 후 복사
출력:
예시 #4
테이블 행, 테이블 헤더, 테이블 데이터, 태그는 HTML에서 사용됩니다. 태그를 사용하면 스타일 자체가 활성화됩니다. 즉,
코드:
Welcome to my domain Name Email Sivaraman Sivaraman [email protected]
로그인 후 복사
출력:
예시 #5
여기서 HTML의 다양한 유형의 스크롤 상자를 살펴보겠습니다
컬러 스크롤 상자
맞춤형 스크롤바
이미지가 포함된 스크롤 상자
테두리가 있는 스크롤 상자
1. 컬러 스크롤 상자
스크롤 상자 옵션에서는 아래 예와 같이 텍스트 상자 공간 영역에 다양한 유형의 색상을 추가했습니다.
코드:
Welcome to my domain.Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain
로그인 후 복사
출력:
위 예에서는 스크롤 패널에도 동일하게 텍스트 색상을 지정했습니다.
2. 맞춤형 스크롤바
Webkit 확장을 사용하여 스크롤 막대를 사용자 정의했습니다. 브라우저에서 작동합니다.
코드:
Welcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domain
로그인 후 복사
출력:
위 코드에서는 전체 페이지에 스크롤 옵션이 표시됩니다. 이는 맞춤형 옵션입니다. 전체 배경 화면에서 스크롤 옵션을 활성화했습니다. 한 번은 CSS 스타일의 웹킷 도구가 일부 브라우저를 허용하지 않는 경우가 있기 때문에 브라우저 호환성도 확인했습니다. 예를 들어 Microsoft에는 –ms- 확장 및 –Webkit- 확장과 같은 기타 브라우저 공급업체가 있습니다.
3. 이미지가 포함된 스크롤 상자
배경 이미지나 전경 이미지에도 스크롤 상자를 사용했습니다. 이 기능의 몇 가지 기본 예를 살펴보겠습니다.
코드:
출력:
4. Scroll Box Borders
We have also added the borders in the scroll panel areas. It will appear like highlighted portion Example below:
Code:
Welcome to My DomainWelcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.
로그인 후 복사
Output:
The above picture highlights the scroll area. Similarly, we can also add different borders like dotted, dashed, double borders, etc.
Features of Scrollbar in HTML Table
When we use the Scroll box, it may have some features like.,
Simple and lightweight
Autoplay
Multiple instances on one page
Useful options for customizing your text in a scrolling
We can also use the jquery library in scroll boxes for features like Previous/Next navigation buttons
Conclusion
In General, We have used many features in the HTML language, but the Scroll bar is one of the best features for crisping the data on the web page for displaying the contents. The above examples and points are in basics; meanwhile, we will have many advanced concepts and features in the HTML and CSS with Scroll bar options. The Latest Versions, HTML 5, and CSS 3, may add some options in the text scroll areas.
위 내용은 HTML 테이블의 스크롤바의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
2024-09-14 10:31:12
2024-09-14 10:26:09
2024-09-14 10:25:38
2024-09-14 10:24:39
2024-09-14 10:22:48
2024-09-14 10:21:22
2024-09-14 10:20:51
2024-09-14 10:20:39
2024-09-14 10:20:32
2024-09-14 10:20:01
