Bài đăng này cách thêm thanh cuộn ngang và dọc vào một div html hoặc hướng dẫn bảng với các ví dụ về kiểu thanh cuộn với màu css styles…

Bạn đang xem: html div cuộn dọc

Đôi khi, chúng tôi muốn thêm vùng chứa dọc hoặc ngang vào các phần tử HTML.

Bài đăng này giải thích cách thêm thanh cuộn ngang và dọc. Nó cũng bao gồm các kiểu CSS để thay đổi màu sắc của thanh cuộn.

Bạn có thể thêm thanh cuộn vào nội dung HTML, bảng, div và bất kỳ phần tử HTML hợp lệ nào bằng cách sử dụng CSS.

Cách thêm thanh cuộn vào phần tử div

Giả sử bạn có một phần tử html div, Bạn đã khai báo chiều rộng 300px và chiều cao: 200px.

Bạn đã thêm nội dung có nhiều hơn chiều cao và chiều rộng đã cho. Sau đó, nó tràn và hiển thị thanh cuộn mặc định (ngang và dọc) cho trang web.

Hãy xem một ví dụ về div

  & lt;! doctype html & gt;
& lt; html lang = "vi" & gt;

& lt; đầu & gt;
  & lt; meta charset = "UTF-8" & gt;
  & lt; phong cách & gt;
  .thùng đựng hàng{
  chiều rộng: 150px;
  chiều cao: 200px;
  border: 1px màu đỏ đặc;
  }
  & lt; / style & gt;
& lt; / head & gt;

& lt; body & gt;

  & lt; body & gt;

 & lt; div class = "container" & gt;
      & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis enim ut tellus elementum sagittis. Amet risus nullam eget felis eget. A lacus vestibulum sed arcu non odio euismod lacinia at. Ultrices gravida dictum fusce ut placerat orci nulla. Lectus magna fringilla urna porttitor rhoncus. Nullaosystemisi morbi tempus iaculis urna. Facilisis gravida neque twallis auctor auctor neque va chạm. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Eleifend donec pretium vulputate sagittis sapien. Nisl nisi scelerisque eu ultrices vitae auctor. Odio morbi quis Goodso odio aenean sed adipiscing diam. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. Vestibulum sed arcu non odio euismod lacinia at quis risus. Vitae et leo duis ut diam quam nulla.

Adipiscing bibendum est ultricies số nguyên quis auctor. Viverra maecenas accumsan lacus velocityisis volutpat. Dolor sed viverra ipsum nunc aliquet. Commodo quis Impeddiet massa tincidunt nunc pulvinar. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Nisi est sit amet Operatingisis magna etiam tempor. Facilisis sed odio morbi quis rowo odio. Pulvinar neque laoreet suse interdum consectetur libero. Dolor magna eget est lorem.

Non Tellus orci ac auctor augue mauris augue. Laoreet non curabitur gravida arcu ac rùa bò dignissim faux aenean. Vel quam elementum pulvinar etiam. Curabitur gravida arcu ac rùa bò dignissim bìm bịp aenean et rùa. Dolor morbi non arcu risus quis varius quam. Phasellus faucibus scelerisque eleifend donec pretium. Arcu ac rùa dignissim bìm bịp aenean et. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Volutpat sed crash ornare arcu dui vivamus arcu felis bibendum. Quên aliquet nibh praesent tristique magna đi. Trong men vi sinh fermentum posuere urna rec tincidunt praesent. Porttitor massa id neque aliquam vestibulum morbi blandit. Eu ultrices vitae auctor eu augue ut lectus.

Vulputate enim nulla aliquet porttitor. Urna nunc id cursus metus. Suspendisse potenti nullam ac rùa cạn vitae. Quên mi proin sed libero. Ut lectus arcu bibendum at varius vel pharetra vel. Nulla seekisi etiam dignissim diam quis. Et malesuada fames ac turpis egestas maecenas pharetra. Phasellus egestas Tellus rutrum Tellus phesiaesque eu tincidunt rùa bò aliquam. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Cras adipiscing enim eu turpis egestas.

Consectetur adipiscing elit duis tristique sollicitudin nibh ngồi. Ngồi vô cùng tiện lợi. Một neque semper auctor bị rơi. Augue ut lectus arcu bibendum tại varius. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Venenatis urna cursus eget nunc scelerisque viverra mauris trong aliquam. Massa tempor ne feugiat nisl pretium fusce id. Ac tincidunt vitae semper quis lectus. Feugiat trong fermentum posuere urna. & Lt; / p & gt;
    & lt; / div & gt;

  & lt; / body & gt;

& lt; / html & gt;

 

Kết quả hiển thị trong trình duyệt dưới dạng nội dung được hiển thị bên ngoài chiều rộng và chiều cao div nhất định.

Xem Thêm  Konva Class: Layer - konvas

Để tránh điều này, chúng tôi có thể thêm một thanh cuộn bằng cách sử dụng tràn-x cho chiều ngang và tràn-y cho thanh cuộn dọc.

tràn-x tràn-y chứa các giá trị sau.

hiển thị: mặc định và hiển thị nội dung bên ngoài của một độ phân giải nhất định nếu xảy ra tràn
ẩn: chỉ hiển thị nội dung có trong một độ phân giải nhất định mới có thể nhìn thấy được và nội dung bên ngoài là ẩn.
cuộn: thêm thanh cuộn và nội dung được bao bọc bên trong một độ phân giải nhất định với thanh cuộn
auto: tự động thêm thanh cuộn dựa trên kích thước của gói nội dung.
ban đầu: giá trị ban đầu tức là có thể nhìn thấy
kế thừa: Xem xét giá trị tràn từ phần tử HTML mẹ

Ví dụ về thanh cuộn ngang,

flow-x: scroll tạo thanh cuộn ngang và bao bọc nội dung bằng khoảng trắng thành nowrap

 . 

container

{

chiều rộng

:

150

px

;

chiều cao

:

200

px

;

đường viền

:

1

px

màu đỏ

đặc

;

khoảng trắng

:

ngay bây giờ

;

tràn-x

:

cuộn

; }

Ví dụ về thanh cuộn dọc,
flow-y: scroll tạo một thanh cuộn dọc và bao bọc nội dung bằng một thanh cuộn

Thêm các kiểu css bên dưới

 . 

container

{

chiều rộng

:

150

px

;

chiều cao

:

200

px

;

đường viền

:

1

px

màu đỏ

đặc

;

tràn-y

:

cuộn

; }

Kết quả này xuất ra thanh cuộn ngang và dọc được đưa ra bên dưới

Cách thêm thanh cuộn và theo dõi mỏng với kiểu màu CSS

thanh cuộn có một số kiểu WebKit để áp dụng màu và các kiểu khác.

Xem Thêm  Java - Phương thức - cách tạo một phương thức trong java

  • webkit-thanh cuộn
  • webkit-scrollbar-track
  • webkit-scrollbar-thumb

Đây là mã sass

  

.container

{

chiều rộng

:

150

px

;

chiều cao

:

200

px

;

tràn

: scroll

;

tràn-x

: ẩn

;

tràn-y

: auto

;

& amp;

:: -

webkit-thanh cuộn {

chiều rộng

:

10

px

; }

& amp;

{

chiều rộng thanh cuộn

: thin

;

màu thanh cuộn

:

xanh đỏ; }

& amp;

:: -

webkit-scrollbar-track {

nền

: xanh lam

;

bán kính đường viền

:

0

0

4

px

0

; }

& amp;

:: -

webkit-scrollbar-thumb {

nền

: đỏ

;

bán kính đường viền

:

4

px

; } }

Đây là mã css

 . 

container

{

chiều rộng

:

150

px

;

chiều cao

:

200

px

;

tràn

:

cuộn

;

tràn-x

:

ẩn

;

tràn-y

:

tự động

; } .

vùng chứa

:: - webkit-thanh cuộn {

chiều rộng

:

10

px

; } .

vùng chứa

{ chiều rộng thanh cuộn:

mỏng

; màu thanh cuộn:

xanh lam

đỏ

; } .

vùng chứa

:: - webkit-scrollbar-track {

nền

:

xanh lam

;

bán kính đường viền

:

0

0

4

px

0 ; } .

vùng chứa

:: - webkit-scrollbar-thumb {

nền

:

đỏ

;

bán kính đường viền

:

4

px

; }

Và html là

  & lt; 

div

lớp

=

"vùng chứa"

& gt; & lt;

p

& gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis enim ut tellus elementum sagittis. Amet risus nullam eget felis eget. A lacus vestibulum sed arcu non odio euismod lacinia at. Adipiscing bibendum est ultricies số nguyên quis auctor. Viverra maecenas accumsan lacus velocityisis volutpat. Dolor sed viverra ipsum nunc aliquet. Commodo quis Impeddiet massa tincidunt nunc pulvinar. & lt; /

p

& gt; & lt; /

div

& gt;

Kết xuất thanh cuộn thành div với các kiểu màu CSS được áp dụng


Xem thêm những thông tin liên quan đến chủ đề html div cuộn dọc

How To Create A Vertical Scrollbar In HTML

  • Tác giả: Sir Chogyal
  • Ngày đăng: 2021-06-05
  • Đánh giá: 4 ⭐ ( 7259 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: You can add the default scrollbar very easily. If you want to modify your scrollbar, just add some additional CSS code as shown in this video.

    ❀ Buy books from the affiliate links below:
    ▶HTML and CSS QuickStart Guide: https://amzn.to/3Jl6hjJ
    ▶Web Design with HTML, CSS, JavaScript & jQuery Set at https://amzn.to/3uGkG6k
    ▶learn JavaScript Quickly: https://amzn.to/3uB7Q9n

    ❀ Visit my blog at http://v815.blogspot.com

    ❀ Join me on Telegram: https://t.me/sirchogyal

    ▶️ Subscribe to this channel for more videos.

HTML không để thanh cuộn dọc tạo thanh cuộn ngang [trùng lặp]

  • Tác giả: isolution.pro
  • Đánh giá: 4 ⭐ ( 3452 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Customize Scrollbar trong trình duyệt với CSS

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 5114 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới Thiệu

Cuộn ngang và cuộn dọc với fullPage.js

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 4 ⭐ ( 2359 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày nay càng nhiều trang được thiết kế dựa trên cách tiếp cận đơn-trang (hay còn gọi là các trang web đơn-trang hoặc một-trang) Trong bài viết này, chúng tôi sẽ khám phá cách để tạo ra những…

HTML: Làm cách nào để tạo DIV chỉ với các thanh cuộn dọc cho các đoạn văn dài?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 4187 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Sử dụng overflow-y. Thuộc tính này là CSS 3.

Tạo một div có thể cuộn theo chiều dọc bằng CSS

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 4 ⭐ ( 1934 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Điều này
    cung cấp một div mà người dùng có thể cuộn theo cả chiều ngang và chiều dọc. Làm cách nào để thay đổi nó để div chỉ là …

HTML: Tạo một div có thể cuộn theo chiều dọc bằng CSS

  • Tác giả: vi.chathamabc.org
  • Đánh giá: 5 ⭐ ( 7758 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Điều này
    cung cấp một div mà người dùng có thể cuộn theo cả chiều ngang và chiều dọc. Làm cách nào để thay đổi nó để div chỉ là …

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

By ads_php