Trang chủ Thủ thuật internet Tùy chỉnh thanh cuộn trên Google Chrome với Scrollbar Customizer

Tùy chỉnh thanh cuộn trên Google Chrome với Scrollbar Customizer

Lưu ý: Bạn hãy đọc thật kỹ bài viết trước khi thực hiện nhé ! Nếu như trong quá trình sử dụng bạn gặp bất cứ lỗi gì, ví dụ như bị lỗi link download, blog load chậm, hay là không truy cập vào được một trang nào đó trên blog... thì bạn vui lòng thông báo với mình tại đây nhé. Thanks !

Thanh cuộn chuột là một thành phần không thể thiếu trong các cửa sổ làm việc trên các thiết bị điện tử như điện thoại Smartphone, cho đến iPad, Smart TV…


Nó sẽ luôn xuất hiện bên phải của màn hình cửa sổ làm việc, ví dụ như khi bạn truy cập một vào một trang web chẳng hạn, bạn phải cuộn chuột xuống thì mới có thể xem được các nội dung ở phía bên dưới.

Giao diện mặc định của thanh cuộn chuột thường là màu xám, và rất ít khi được các nhà phát triển thay đổi. Thỉnh thoảng thì bạn mới bắt gặp có một vài trang có giao diện riêng cho thanh Scrollbar mà thôi, nên nói chung nhìn nhiều cũng khá là nhàm chán.

Chính vì thế trong bài viết này mình sẽ giới thiệu đến các bạn một tiện ích mang tên Scrollbar Customizer, tiện ích này sẽ hỗ trợ bạn tùy chỉnh lại giao diện của thanh cuộn trang ở tất cả trang web. Bạn có thể dễ dàng thay đổi sang màu sắc mà bạn yêu thích một cách đơn giản và dễ dàng.

Đọc thêm:

Đổi màu sắc, kích thước… thanh cuộn trang trên Google Chrome

+ Bước 1: Vẫn như thường lệ thôi, bạn truy cập vào liên kết sau đây ! trên  Chrome Web Store để tải và cài đặt tiện ích Scrollbar Customizer => sau đó bấm vào nút Thêm vào Chrome để tiến hành cài đặt tiện ích.

tuy-chinh-thanh-cuan-chuot-tren-google-chrome-voi-scrollbar-customizer (1)

+ Bước 2: Click vào nút Add Extensions để xác nhận cài đặt nó vào trình duyệt.

tuy-chinh-thanh-cuan-chuot-tren-google-chrome-voi-scrollbar-customizer (2)

+ Bước 3: Cài xong thì bạn hãy truy cập vào một trang web bất kì nào đó, chẳng hạn như tìm kiếm trên Google với từ khóa bất kì chẳng hạn.

=> Sau đó bấm vào icon của tiện ích Scrollbar Customizer ở góc bên phải, phía trên của trình duyệt web.

Nó sẽ hiển thị chi tiết hai mẫu, đó là: Khi thanh cuộn chuột được kích hoạt tùy chỉnh, và cả khi nó không được sử dụng như trong hình bên dưới.

tuy-chinh-thanh-cuan-chuot-tren-google-chrome-voi-scrollbar-customizer (3)

Mặc định thì tiện ích này cũng được trang bị khá nhiều giao diện có sẵn trong kho ứng dụng, và nhìn cũng tạm ổn, có thể dùng được.

Để chọn một mẫu sẵn có thì hãy bạn hãy bấm vào phần Preset Scrollbars => rồi chọn trong danh sách một mục nào đó. Hoặc bạn có thể chọn lần lượt các mục ở trong danh sách để tìm được cái ưng ý.

Sau khi bạn chọn thử một kiểu mới nó sẽ được hiển thị ngay ở bên trên cho các bạn xem thử trước.

Chọn xong các bạn nhớ bấm Save để áp dụng thay đổi nhé. Thay đổi này sẽ có tác dụng ngay mà không cần F5 để tải lại trang hay khởi động lại trình duyệt như một số tiện ích khác..

tuy-chinh-thanh-cuan-chuot-tren-google-chrome-voi-scrollbar-customizer (4)

Note: Nếu bạn không ưng ý với những giao diện có sẵn của tiện ích => thì bạn hãy click vào nút Customize để tạo ra giao diện Custom của riêng bạn cho thanh cuộn.

Đầu tiên là phần Scrollbar Size:

  • Width: Là chiều ngang, độ rộng của thanh cuộn trang, để tầm 10-15 là ổn.
  • Height: Chiều rộng của thanh cuộn ngang dưới chân trang, cũng để từ 10-15 là vừa dùng..
  • Background Color: Màu nền của thanh cuộn, cũng là màu của toàn bộ thanh cuộn ở trạng thái không sử dụng, bạn chọn màu tùy thích thôi 😀

tuy-chinh-thanh-cuan-chuot-tren-google-chrome-voi-scrollbar-customizer (5)

Tiếp theo là phần Button Size, các mục Width, Height, Rounded, Background Color không cần chỉnh gì mà để nguyên là được. Cái này chỉ giúp bạn rút ngắn độ dài của thanh cuộn mà thôi.

Kéo xuống dưới một chút là phần chỉnh sửa cái nút mà bạn bấm giữ chuột để kéo trang xuống, chỉnh nó ở mục Thumbsize:

  • Rounded: Bo tròn 4 góc của nút, nhìn cũng khá đẹp. Để như nào tùy bạn thôi, số càng lớn thì góc càng tròn.
  • Color Size: Có 3 kiểu là Clean ( 1 màu), Linear (2 màu trên dưới như trong hình demo), Radial (1 màu ở giữa và màu còn lại ở viền ngoài), rồi hãy kích vào 2 ô chọn màu bên dưới để chọn màu bạn thích

Sau khi chỉnh sửa và xem demo thấy ưng ý rồi thì hãy bấm vào Save để lưu lại và bắt đầu sử dụng thanh cuộn trang do chính bạn tạo ra thôi 😀

tuy-chinh-thanh-cuan-chuot-tren-google-chrome-voi-scrollbar-customizer (6)

Và đây là thành quả của mình đó các bạn, mình thì đơn giản thôi 🙂

tuy-chinh-thanh-cuan-chuot-tren-google-chrome-voi-scrollbar-customizer (7)

Lời kết


Vâng, như vậy là mình vừa hướng dẫn rất chi tiết cho các bạn cách tùy chỉnh thanh cuộn trên Google Chrome với tiện ích Scrollbar Customizer rồi nhé.

Và các bạn cũng đừng quên là tiện ích này ngoài sử dụng được trên Google Chrome ra thì nó cũng hoạt động rất tốt trên các trình duyệt sử dụng nhân Chromium như Brave, Cốc Cốc, Microsoft Edge Chromium.. đấy nhé ^^

Hi vọng bài viết này sẽ hữu ích với các bạn. Chúc các bạn thành công !

CTV: Nguyễn Thanh Tùng – Blogchiasekienthuc.com

Note: Bài viết này hữu ích với bạn chứ ? Đừng quên đánh giá bài viết, like và chia sẻ cho bạn bè và người thân của bạn nhé !

Administrator: Kiên Nguyễn Blog

Có một câu nói của người Nhật mà mình rất thích đó là " Người khác làm được thì mình cũng làm được ". Chính vì thế mà hãy theo đuổi đam mê, thành công sẽ theo đuổi bạn ! Nếu như bạn đang gặp khó khăn và cần sự trợ giúp thì hãy comment phía bên dưới mỗi bài viết để nhận được sự hỗ trợ từ cộng đồng Blog Chia Sẻ Kiến Thức nhé.


Một vài lưu ý trước khi comment :

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Tất cả các comment của các bạn sẽ được giải đáp trong vòng 48h (thường vào buổi tối)!
Không được sử dụng từ khóa trong ô 'Name', bạn hãy dùng tên thật hoặc Nickname của bạn !
Không dẫn link sang trang web/blog khác. Xem quy định comment tại đây. Thank All!

Leave a Reply

Your email address will not be published. Required fields are marked *