Hướng dẫn về Thanh cuộn trong HTML. Ở đây chúng tôi thảo luận tổng quan ngắn gọn về Scrollbar trong HTML và các Ví dụ về nó cùng với Triển khai mã của nó.

Bạn đang xem : thẻ cuộn trong html

Thanh cuộn trong HTML

Giới thiệu về Thanh cuộn trong HTML

Thanh ngang hoặc dọc được sử dụng để di chuyển vùng xem trong cửa sổ, lên, xuống, sang trái hoặc sang phải bằng chuột hoặc bàn di chuột hoặc bàn phím. Bạn có thể nhấp vào bản nhạc để đưa thanh cuộn đến một phần cụ thể của cửa sổ hoặc nhấp vào thanh và kéo thanh đến một vị trí cụ thể. Dưới đây là ảnh chụp màn hình của thanh cuộn để giúp bạn hiểu thêm.

Thanh cuộn trong HTML Ví dụ 1

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Hình ảnh trên là tài liệu từ điển hình của chúng tôi với thanh cuộn dọc mặc định của nó. Thanh, đôi khi còn được gọi là tay cầm, được sử dụng để kéo vùng xem của cửa sổ. Và khu vực trên đó thanh trượt của chúng ta được gọi là đường đi.

Thường có các thanh cuộn mặc định hiển thị trên cửa sổ của bạn cho dù thông tin trong cửa sổ có bị tràn hay không. Nhưng ngày nay, những thanh cuộn này được tạo ra tương tác; nghĩa là, nếu và khi thông tin tràn ra, thanh cuộn dọc hoặc / và ngang sẽ xuất hiện.

Trong bài viết này, chúng tôi sẽ thử và tạo các thanh cuộn, hay nói cách khác là các thanh cuộn tương tác bằng cách sử dụng HTML đơn giản.

HTML || Thanh cuộn || Dòng chảy quá mức

HTML có cách giải quyết bất cứ điều gì bạn có thể nghĩ ra và nếu không, thì với sự trợ giúp của các thuộc tính CSS, HTML đảm bảo bạn sẽ nhận được kết quả mong muốn. Một thuộc tính CSS như vậy được gọi là thuộc tính ‘tràn’ được áp dụng cho & lt; div & gt; nhãn. Thuộc tính “tràn” có thể được sử dụng theo nhiều cách, nhưng chúng tôi sẽ trình bày rõ hơn về hai cách như vậy trong bài viết này.

Mục đích của Thuộc tính ‘Tràn’ trong Thanh cuộn trong HTML là gì?

Thuộc tính ‘tràn’ giúp bạn quyết định rằng bạn nên cung cấp thông tin hoặc dữ liệu của mình hoặc nội dung bị tràn khỏi hộp phần tử của bạn, chẳng hạn như một số nội dung được bao gồm trong & lt; div & gt; thẻ, những gì cần phải được thực hiện. Thuộc tính này giúp bạn quyết định hiển thị hay không hiển thị nội dung bị tràn hoặc che nội dung đó bằng cách sử dụng thanh cuộn để sử dụng thuận tiện nội dung lớn cho một khu vực hiển thị cụ thể.

Xem Thêm  Peer To Peer Là Gì - mạng peer to peer

Tuy nhiên, thuộc tính ‘tràn’ được sử dụng và có hiệu quả với nội dung là phần tử khối có chiều cao cụ thể. Thuộc tính ‘tràn’ cũng được hầu hết các trình duyệt web hỗ trợ. Cú pháp khá đơn giản để sử dụng thuộc tính này.

Cú pháp:

tràn: cuộn | tự động | hiển thị | ẩn | ban đầu | kế thừa;

Từ các tùy chọn trên, người ta có thể sử dụng bất kỳ giá trị nào trong số các giá trị này cho thuộc tính tràn. Một trong những ứng dụng của thuộc tính tràn là với & lt; div & gt; thẻ này, khi được sử dụng, sẽ tạo ra một hộp cuộn.

Hãy cùng tìm hiểu về Hộp cuộn.

HTML || Thanh cuộn || Hộp cuộn

Hộp cuộn trong HTML chỉ đơn giản là một hộp nếu và khi sử dụng có các thanh cuộn riêng. Vì vậy, nếu một người đặt thông tin hoặc đoạn văn của mình bên trong hộp cuộn, anh ta không cần phải lo lắng về các thanh cuộn vì chúng sẽ có sẵn theo ý của anh ta cùng với hộp cuộn.

Ví dụ về hộp cuộn được nhồi trong HTML:

Thanh cuộn trong HTML Ví dụ 2

Thông thường, một hộp cuộn có được khi sử dụng & lt; div & gt; và tùy chỉnh cho thanh được thực hiện bằng cách sử dụng các thuộc tính CSS. Trong khi tạo hộp cuộn, chúng tôi sử dụng thuộc tính CSS được gọi là “tràn” và đặt nó thành “scroll” để cho trình duyệt biết rằng nó sẽ thêm các thanh cuộn ngang và dọc.

Dưới đây là mã ví dụ đơn giản và cơ bản cho hộp cuộn HTML có tràn: scroll.

  & lt; body & gt;
& lt; div style = "width: 150px; height: 150px; line-height: 3em; Over: scroll; border: thin # 000 solid; padding: 5px;" & gt;  

Có một phần tử ‘div’ sử dụng ‘tràn: tự động’ để tạo thanh cuộn.

 & lt; / div & gt;
& lt; / body & gt;  

Điều này dẫn đến sự xuất hiện rõ ràng của một thanh cuộn. Kết quả bạn có thể quan sát trong hình dưới đây.

Thanh cuộn trong HTML Ví dụ 3
Như chúng ta đã thấy trước đó, thuộc tính ‘tràn’ có ít giá trị có thể được sử dụng. Trên đây là ví dụ về ‘tràn: cuộn’. Những người khác được hiển thị bên dưới:

‘tràn: tự động.’

Như chúng ta đã thấy trước đó, thuộc tính ‘tràn’ có một số giá trị có thể được sử dụng. Trên đây là ví dụ về ‘tràn: cuộn’. Những cái khác được hiển thị bên dưới:

Nó tạo ra hiệu ứng tương tự như tràn: scroll, nhưng với tràn: auto, một thanh cuộn sẽ chỉ xuất hiện NẾU dữ liệu bị tràn; nếu không, hộp cuộn sẽ xuất hiện mà không có bất kỳ thanh cuộn nào.

Xem bên dưới:

tràn: ẩn Ví dụ 4  Thanh cuộn trong HTML Ví dụ 5

Cả hai hình ảnh trên đều đang sử dụng thuộc tính tràn với giá trị là ‘auto’. Lưu ý rằng hình ảnh đầu tiên có thanh cuộn, trong khi hình ảnh thứ hai không có thanh cuộn. Đây là chức năng cơ bản của thuộc tính ‘tràn: tự động’; nghĩa là, một thanh cuộn sẽ chỉ xuất hiện NẾU có một số dữ liệu bị tràn.

Xem Thêm  Từ điển Python - cách sử dụng dict trong python

‘tràn: ẩn’

Thuộc tính này có một mục đích đặc biệt. Ngay cả khi một số dữ liệu ở trạng thái tràn, thuộc tính tràn có giá trị ‘hidden’ sẽ chứa nó bên trong cửa sổ và không cho người dùng biết. Hãy quan sát bên dưới.

tràn: ẩn Ví dụ 6

Hãy quan sát rằng, mặc dù không có thanh cuộn và dữ liệu bị tràn, nhưng nó được chứa hoàn hảo bên trong vùng hiển thị. ‘Overflow: hiển thị’ có tác dụng ngược lại. Nó hiển thị nội dung tràn và nội dung hiển thị trên cửa sổ hiển thị.

Thanh cuộn trong HTML Ví dụ 7

Ngoài việc áp dụng thuộc tính ‘tràn’ cho & lt; div & gt; , một thuộc tính khác có thể được sử dụng, & lt; iframe & gt; nhãn. Cú pháp và mã cơ bản cho & lt; iframe & gt; được đưa ra dưới đây:

  & lt; body & gt;
& lt; iframe src = "7422324.jpg" width = "200" height = "200" scrolling = "yes" & gt;
& lt; / iframe & gt;
& lt; / body & gt;  

& lt; iframe & gt; thẻ sử dụng thuộc tính tràn với ba giá trị cơ bản: scrolling: yes | no | auto. Như các giá trị đề xuất, ‘scrolling: yes’ cung cấp các thanh cuộn cho khung. ‘Scrolling: no’ không cung cấp cho khung bất kỳ thanh cuộn nào và ‘scrolling: auto’ cung cấp các thanh cuộn NẾU nội dung hoặc dữ liệu bị tràn.

Ví dụ cuộn 9

Dưới đây là ba hình ảnh có các giá trị khác nhau được gán cho thuộc tính “cuộn”.

Vì vậy, chúng tôi đã thấy hai phương pháp khác nhau để thêm thanh cuộn, rõ ràng hoặc mặc định.

& gt; Một là sử dụng thuộc tính ‘tràn’ thường được áp dụng cho & lt; div & gt; thẻ.

& gt; Và thứ hai là thuộc tính “cuộn” được áp dụng cho & lt; iframe & gt; thẻ.

Cả hai đều phục vụ cùng một mục đích là thêm thanh cuộn vào nội dung hiển thị của bạn.

Các bài báo được đề xuất

Đây là hướng dẫn về Thanh cuộn trong HTML. Ở đây chúng tôi thảo luận về tổng quan ngắn gọn về Scrollbar trong HTML và các Ví dụ về nó cùng với phần Triển khai mã của nó. Bạn cũng có thể xem qua các bài viết đề xuất khác của chúng tôi để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề thẻ cuộn trong html

CSS Scroll Down Animated Button | Scroll More Button

alt

  • Tác giả: WEB CIFAR
  • Ngày đăng: 2020-08-09
  • Đánh giá: 4 ⭐ ( 7680 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This is the day-17 of 30days30submits. Today we are going to create a animated CSS scroll down button. Hope you will like it.

    🔔subscribe and turn on the notification bell.
    👉 source code: https://codepen.io/Web_Cifar/pen/WNwvOaE
    👉 30days30submits : https://github.com/ShaifArfan/30days30submits

    ⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs (including VSCode) to give you smart completions and documentation while you’re typing. This will be helpful for Web Development. So check it out 👇👇.
    https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=webcifar&utm_content=description-only

    ▶ Also Watch :
    Make a full website with HTML & CSS: https://youtu.be/ZFQkb26UD1Y
    HTML & CSS Landing Page : https://youtu.be/6SCV-JXNvXI
    Mini Project for HTML & CSS : https://youtu.be/7ylX8R0RENo
    How To Make A WordPress website: https://youtu.be/DtHDhDJYOfA

    ▶ Some useful Playlist :
    HTML & CSS: https://www.youtube.com/playlist?list=PLRv_Gd5w9e7mmrNLpQTB9RWMsVoRt2moe
    Vanilla JavaScript : https://www.youtube.com/playlist?list=PLRv_Gd5w9e7mmALZQWt_DJErngAFLp-aV
    Frontend Mentor Challenges: https://www.youtube.com/playlist?list=PLRv_Gd5w9e7liRWZfoXX1MgNztk2HPMVp

    🌐 Join The Community :
    Our website : https://webcifar.com/
    Facebook Page : https://facebook.com/webcifar
    Facebook group : http://bit.ly/fb-group-webcifar
    Instagram : https://www.instagram.com/web_cifar/
    twitter : https://twitter.com/webcifar
    Github: https://github.com/WebCifar

    30days30submits scrollDown css

Cách tạo một Header Cố định và Hoạt hình khi Cuộn Trang

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 5 ⭐ ( 7691 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo một dạng thường được thấy trên nhiều trang web ngày này: một header cố định và hoạt hình thành một trạng thái thu nhỏ hơn khi chúng ta cuộn…

Thẻ marquee trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 9101 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ marquee trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Scrollbar( thanh cuộn) trong CSS

  • Tác giả: websitehcm.com
  • Đánh giá: 3 ⭐ ( 5076 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Scrollbar( thanh cuộn) trong CSS w3seo cách sử dụng Style CSS của Scrollbar, cách trang trí Scrollbar trong CSS

Cách tạo hộp có văn bản cuộn với CSS và HTML

  • Tác giả: www.greelane.com
  • Đánh giá: 4 ⭐ ( 3714 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS giúp bạn dễ dàng tạo văn bản cuộn bằng hộp văn bản HTML. Tìm hiểu cách sử dụng HTML để thiết lập thanh cuộn để đối phó với văn bản tràn.

Bài 27: Các kiểu Input trong HTML

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 3923 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu tất cả các kiểu input trong html và html5 như textbox, checkbox, radiobutton, button, submit, password, datetime, url, tel, month, week, color

Cách Tạo Thanh Cuộn Dọc Trong Html, Cách Tạo Thanh Cuộn (Scroll) Cho Một Phần Tử Html

  • Tác giả: hutgiammo.com
  • Đánh giá: 4 ⭐ ( 1630 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Thông thường, khi

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Nhận xét HTML - Cách Nhận xét Ra một Dòng hoặc Thẻ trong HTML - bình luận mã html

By ads_php