{"id":92123,"date":"2025-11-30T22:23:57","date_gmt":"2025-11-30T15:23:57","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=92123"},"modified":"2025-12-02T09:30:31","modified_gmt":"2025-12-02T02:30:31","slug":"huong-dan-su-dung-scrollbar-bootstrap","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/","title":{"rendered":"Scrollbar Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#Gioi_thieu_ve_Scrollbar_trong_Bootstrap\" >Gi\u1edbi thi\u1ec7u v\u1ec1 Scrollbar trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#Cac_lop_Overflow_Utilities_trong_Bootstrap\" >C\u00e1c l\u1edbp Overflow Utilities trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#Scrollbar_trong_cac_component_cua_Bootstrap\" >Scrollbar trong c\u00e1c component c\u1ee7a Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#Bang_tong_hop_cac_class_tien_ich_thao_tac_voi_Scrollbar_Bootstrap\" >B\u1ea3ng t\u1ed5ng h\u1ee3p c\u00e1c class ti\u1ec7n \u00edch thao t\u00e1c v\u1edbi Scrollbar Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#Scrollspy_trong_Bootstrap\" >Scrollspy trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#Mot_so_luu_y_khi_su_dung_Scrollbar_trong_Bootstrap\" >M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Scrollbar trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#Cac_cau_hoi_pho_bien_ve_Scrollbar_Bootstrap\" >C\u00e1c c\u00e2u h\u1ecfi ph\u1ed5 bi\u1ebfn v\u1ec1 Scrollbar Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong qu\u00e1 tr\u00ecnh thi\u1ebft k\u1ebf giao di\u1ec7n website, c\u00f3 nh\u1eefng l\u00fac n\u1ed9i dung tr\u00ean giao di\u1ec7n c\u1ee7a b\u1ea1n nhi\u1ec1u \u0111\u1ebfn m\u1ee9c tr\u00e0n ra ngo\u00e0i khung \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn th\u1ea9m m\u1ef9. L\u00fac n\u00e0y, scrollbar (thanh cu\u1ed9n) ch\u00ednh l\u00e0 gi\u1ea3i ph\u00e1p h\u00e0ng \u0111\u1ea7u, n\u00f3 cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng xem th\u00eam m\u00e0 kh\u00f4ng l\u00e0m v\u1ee1 layout.<\/em><\/strong><\/p>\n\n\n\n<p>V\u1edbi Bootstrap, b\u1ea1n kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng cho overflow, m\u00e0 c\u00f3 th\u1ec3 t\u1eadn d\u1ee5ng c\u00e1c overflow utilities s\u1eb5n c\u00f3 \u0111\u1ec3 th\u00eam, \u0111i\u1ec1u ch\u1ec9nh ho\u1eb7c \u1ea9n scrollbar nhanh ch\u00f3ng. Ngo\u00e0i ra, Bootstrap c\u00f2n h\u1ed7 tr\u1ee3 c\u00e1c t\u00ecnh hu\u1ed1ng th\u1ef1c t\u1ebf nh\u01b0 modal, offcanvas, dropdown, b\u1ea3ng d\u1eef li\u1ec7u v\u00e0 scrollspy. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd h\u01b0\u1edbng d\u1eabn chi ti\u1ebft cho b\u1ea1n c\u00e1ch s\u1eed d\u1ee5ng scrollbar trong Bootstrap, t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gi\u1edbi-thi\u1ec7u-v\u1ec1-scrollbar-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Gioi_thieu_ve_Scrollbar_trong_Bootstrap\"><\/span><strong>Gi\u1edbi thi\u1ec7u v\u1ec1 Scrollbar trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scrollbar-la-gi\"><strong>Scrollbar l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Scrollbar (thanh cu\u1ed9n) l\u00e0 ph\u1ea7n t\u1eed giao di\u1ec7n cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng di chuy\u1ec3n n\u1ed9i dung v\u01b0\u1ee3t qu\u00e1 k\u00edch th\u01b0\u1edbc khung ch\u1ee9a. Thanh cu\u1ed9n c\u00f3 th\u1ec3 n\u1eb1m theo chi\u1ec1u d\u1ecdc ho\u1eb7c ngang, th\u01b0\u1eddng xu\u1ea5t hi\u1ec7n khi n\u1ed9i dung d\u00e0i h\u01a1n v\u00f9ng hi\u1ec3n th\u1ecb.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5: khi b\u1ea1n c\u00f3 m\u1ed9t \u0111o\u1ea1n v\u0103n b\u1ea3n d\u00e0i trong m\u1ed9t h\u1ed9p nh\u1ecf, scrollbar s\u1ebd t\u1ef1 \u0111\u1ed9ng xu\u1ea5t hi\u1ec7n \u0111\u1ec3 h\u1ed7 tr\u1ee3 cu\u1ed9n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"378\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-18.png\" alt=\"\" class=\"wp-image-92124\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-18.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-18-300x142.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-18-640x302.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-18-200x94.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-18-768x363.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scrollbar-trong-bootstrap-co-ph\u1ea3i-la-m\u1ed9t-component-rieng\"><strong>Scrollbar trong Bootstrap c\u00f3 ph\u1ea3i l\u00e0 m\u1ed9t component ri\u00eang?<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t \u0111i\u1ec3m ch\u00fang ta c\u1ea7n l\u00e0m r\u00f5 l\u00e0 Bootstrap kh\u00f4ng cung c\u1ea5p m\u1ed9t component ri\u00eang c\u00f3 t\u00ean \u201cScrollbar\u201d. Scrollbar v\u1ed1n l\u00e0 c\u01a1 ch\u1ebf m\u1eb7c \u0111\u1ecbnh c\u1ee7a CSS, \u0111\u01b0\u1ee3c ki\u1ec3m so\u00e1t th\u00f4ng qua thu\u1ed9c t\u00ednh overflow.<\/p>\n\n\n\n<p>Trong h\u1ec7 th\u1ed1ng c\u1ee7a Bootstrap, vi\u1ec7c l\u00e0m vi\u1ec7c v\u1edbi scrollbar \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 d\u01b0\u1edbi hai h\u00ecnh th\u1ee9c ch\u00ednh:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e1c l\u1edbp ti\u1ec7n \u00edch (Utilities Classes): Bootstrap \u0111\u1ecbnh ngh\u0129a s\u1eb5n b\u1ed1n class .overflow-auto, .overflow-hidden, .overflow-visible v\u00e0 .overflow-scroll \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng nhanh m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng<\/li>\n\n\n\n<li>T\u00edch h\u1ee3p trong c\u00e1c component: M\u1ed9t s\u1ed1 th\u00e0nh ph\u1ea7n c\u1ee7a Bootstrap nh\u01b0 Modal, Offcanvas, Dropdown v\u00e0 Table \u0111\u00e3 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 x\u1eed l\u00fd t\u00ecnh hu\u1ed1ng n\u1ed9i dung tr\u00e0n, k\u00e8m c\u01a1 ch\u1ebf hi\u1ec3n th\u1ecb scrollbar khi c\u1ea7n<\/li>\n<\/ul>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y gi\u00fap nh\u00e0 ph\u00e1t tri\u1ec3n ti\u1ebft ki\u1ec7m th\u1eddi gian tri\u1ec3n khai, \u0111\u1ea3m b\u1ea3o s\u1ef1 \u0111\u1ed3ng b\u1ed9 v\u1ec1 giao di\u1ec7n, \u0111\u1ed3ng th\u1eddi gi\u1ea3m thi\u1ec3u l\u1ed7i so v\u1edbi c\u00e1ch vi\u1ebft CSS t\u00f9y \u00fd cho t\u1eebng tr\u01b0\u1eddng h\u1ee3p.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bootstrap-h\u1ed7-tr\u1ee3-scrollbar-nh\u01b0-th\u1ebf-nao\"><strong>Bootstrap h\u1ed7 tr\u1ee3 scrollbar nh\u01b0 th\u1ebf n\u00e0o?<\/strong><\/h3>\n\n\n\n<p>Trong giao di\u1ec7n web, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 t\u1ef1 vi\u1ebft CSS \u0111\u1ec3 t\u1ea1o scrollbar. Gi\u1ea3 s\u1eed b\u1ea1n c\u00f3 m\u1ed9t h\u1ed9p ch\u1ee9a danh s\u00e1ch th\u00f4ng b\u00e1o, chi\u1ec1u cao c\u1ed1 \u0111\u1ecbnh, n\u1ed9i dung d\u00e0i h\u01a1n th\u00ec ph\u1ea3i cu\u1ed9n xu\u1ed1ng. C\u00e1ch th\u1ee7 c\u00f4ng s\u1ebd nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"custom-box\"&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 1: H\u1ec7 th\u1ed1ng s\u1ebd b\u1ea3o tr\u00ec v\u00e0o 23:00 t\u1ed1i nay.&lt;\/p&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 2: C\u00f3 b\u1ea3n c\u1eadp nh\u1eadt m\u1edbi cho \u1ee9ng d\u1ee5ng.&lt;\/p&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 3: T\u00e0i kho\u1ea3n c\u1ee7a b\u1ea1n v\u1eeba \u0111\u01b0\u1ee3c \u0111\u0103ng nh\u1eadp th\u00e0nh c\u00f4ng.&lt;\/p&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 4: M\u1ed9t ng\u01b0\u1eddi d\u00f9ng \u0111\u00e3 g\u1eedi l\u1eddi m\u1eddi k\u1ebft b\u1ea1n.&lt;\/p&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 5: M\u00e1y ch\u1ee7 s\u1ebd kh\u1edfi \u0111\u1ed9ng l\u1ea1i trong v\u00f2ng 5 ph\u00fat n\u1eefa.&lt;\/p&gt;\n &lt;\/div&gt;\n &lt;style&gt;\n   .custom-box {\n     border: 1px solid #ddd;\n     max-height: 150px;\n     overflow-y: auto;\n     padding: 1rem;\n   }\n &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p><strong>K\u1ebft qu\u1ea3:<\/strong> Khi n\u1ed9i dung v\u01b0\u1ee3t qu\u00e1 150px, m\u1ed9t scrollbar d\u1ecdc xu\u1ea5t hi\u1ec7n \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n.<\/p>\n\n\n\n<p>V\u1edbi c\u00e1ch tri\u1ec3n khai n\u00e0y, b\u1ea1n ph\u1ea3i nh\u1edb c\u00fa ph\u00e1p v\u00e0 ph\u1ea3i vi\u1ebft CSS cho overflow-y, max-height, padding, th\u1eadm ch\u00ed th\u00eam border, background\u2026 m\u1ed7i l\u1ea7n d\u00f9ng. \u0110i\u1ec1u n\u00e0y g\u00e2y m\u1ee9c th\u1eddi gian v\u00e0 c\u00f3 th\u1ec3 m\u1ea5t \u0111\u1ed3ng b\u1ed9 khi l\u00e0m vi\u1ec7c v\u1edbi nhi\u1ec1u ng\u01b0\u1eddi, nhi\u1ec1u c\u00e1ch vi\u1ebft.<\/p>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 t\u1eadn d\u1ee5ng c\u00e1c Utilities c\u00f3 s\u1eb5n \u0111\u1ec3 th\u1ef1c hi\u1ec7n \u0111i\u1ec1u n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"border overflow-auto\" style=\"max-height: 150px;\"&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 1: H\u1ec7 th\u1ed1ng s\u1ebd b\u1ea3o tr\u00ec v\u00e0o 23:00 t\u1ed1i nay.&lt;\/p&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 2: C\u00f3 b\u1ea3n c\u1eadp nh\u1eadt m\u1edbi cho \u1ee9ng d\u1ee5ng.&lt;\/p&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 3: T\u00e0i kho\u1ea3n c\u1ee7a b\u1ea1n v\u1eeba \u0111\u01b0\u1ee3c \u0111\u0103ng nh\u1eadp th\u00e0nh c\u00f4ng.&lt;\/p&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 4: M\u1ed9t ng\u01b0\u1eddi d\u00f9ng \u0111\u00e3 g\u1eedi l\u1eddi m\u1eddi k\u1ebft b\u1ea1n.&lt;\/p&gt;\n   &lt;p&gt;Th\u00f4ng b\u00e1o 5: M\u00e1y ch\u1ee7 s\u1ebd kh\u1edfi \u0111\u1ed9ng l\u1ea1i trong v\u00f2ng 5 ph\u00fat n\u1eefa.&lt;\/p&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.border<\/code> <\/strong>thay th\u1ebf cho vi\u1ec7c t\u1ef1 vi\u1ebft <strong><code>border: 1px solid #ddd<\/code><\/strong><\/li>\n\n\n\n<li><strong><code>.overflow-auto<\/code><\/strong> ch\u00ednh l\u00e0 class ti\u1ec7n \u00edch Bootstrap \u0111\u00e3 \u0111\u1ecbnh ngh\u0129a s\u1eb5n. Khi n\u1ed9i dung v\u01b0\u1ee3t khung, t\u1ef1 \u0111\u1ed9ng hi\u1ec7n scrollbar<\/li>\n\n\n\n<li><strong><code>style=\u201cmax-height: 150px;\u201d<\/code><\/strong> ch\u1ec9 c\u1ea7n inline ho\u1eb7c c\u00f3 th\u1ec3 d\u00f9ng <strong><code>utility h-*\/min-vh-*<\/code><\/strong> c\u1ee7a Bootstrap<\/li>\n<\/ul>\n\n\n\n<p>H\u00ecnh \u1ea3nh hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"281\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-19.png\" alt=\"\" class=\"wp-image-92125\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-19.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-19-300x106.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-19-640x225.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-19-200x70.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-19-768x270.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>K\u1ebft qu\u1ea3 c\u00f9ng m\u1ed9t t\u00ednh n\u0103ng, nh\u01b0ng v\u1edbi Bootstrap b\u1ea1n kh\u00f4ng c\u1ea7n vi\u1ebft CSS ri\u00eang, ch\u1ec9 c\u1ea7n g\u1eafn class. Nh\u1edd v\u1eady:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ti\u1ebft ki\u1ec7m th\u1eddi gian (copy class l\u00e0 d\u00f9ng \u0111\u01b0\u1ee3c)<\/li>\n\n\n\n<li>Giao di\u1ec7n \u0111\u1ed3ng b\u1ed9 v\u1edbi to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng (m\u00e0u s\u1eafc, border, spacing theo Bootstrap)<\/li>\n\n\n\n<li>D\u1ec5 m\u1edf r\u1ed9ng: mu\u1ed1n scroll ngang th\u00ec thay b\u1eb1ng <strong><code>.overflow-x-auto<\/code><\/strong>, mu\u1ed1n \u1ea9n th\u00ec \u0111\u1ed5i <strong><code>.overflow-hidden<\/code><\/strong>, mu\u1ed1n responsive th\u00ec th\u00eam <strong><code>.overflow-md-auto<\/code><\/strong>\u2026<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-l\u1edbp-overflow-utilities-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_lop_Overflow_Utilities_trong_Bootstrap\"><\/span><strong>C\u00e1c l\u1edbp Overflow Utilities trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cac-class-di\u1ec1u-khi\u1ec3n-scrollbar\"><strong>C\u00e1c class \u0111i\u1ec1u khi\u1ec3n scrollbar<\/strong><\/h3>\n\n\n\n<p>Trong CSS, thu\u1ed9c t\u00ednh overflow quy\u1ebft \u0111\u1ecbnh c\u00e1ch tr\u00ecnh duy\u1ec7t hi\u1ec3n th\u1ecb ph\u1ea7n n\u1ed9i dung v\u01b0\u1ee3t qu\u00e1 k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed ch\u1ee9a. T\u00f9y theo gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c \u0111\u1eb7t, n\u1ed9i dung c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00e0n ra ngo\u00e0i, b\u1ecb \u1ea9n \u0111i, ho\u1eb7c xu\u1ea5t hi\u1ec7n thanh cu\u1ed9n \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp.<\/p>\n\n\n\n<p>Bootstrap cung c\u1ea5p 4 l\u1edbp ti\u1ec7n \u00edch (utilities) cho thu\u1ed9c t\u00ednh overflow:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.overflow-auto<\/code><\/strong>: \u0110\u00e2y l\u00e0 m\u1eb7c \u0111\u1ecbnh ph\u1ed5 bi\u1ebfn khi b\u1ea1n mu\u1ed1n cho ph\u00e9p cu\u1ed9n ch\u1ec9 khi n\u1ed9i dung v\u01b0\u1ee3t qu\u00e1 khung ch\u1ee9a. N\u1ebfu n\u1ed9i dung \u00edt s\u1ebd kh\u00f4ng c\u00f3 thanh cu\u1ed9n, c\u00f2n n\u1ebfu n\u1ed9i dung d\u00e0i h\u01a1n <strong><code>max-height<\/code><\/strong> ho\u1eb7c <strong><code>max-width<\/code><\/strong>, thanh cu\u1ed9n s\u1ebd xu\u1ea5t hi\u1ec7n. Class n\u00e0y th\u01b0\u1eddng d\u00f9ng cho c\u00e1c danh s\u00e1ch \u0111\u1ed9ng nh\u01b0 th\u00f4ng b\u00e1o, tin nh\u1eafn ho\u1eb7c b\u00ecnh lu\u1eadn, n\u01a1i n\u1ed9i dung c\u00f3 th\u1ec3 ng\u1eafn ho\u1eb7c d\u00e0i t\u00f9y tr\u01b0\u1eddng h\u1ee3p.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"border overflow-auto\" style=\"max-height: 100px;\"&gt;\n     &lt;p&gt;D\u00f2ng 1: N\u1ed9i dung ng\u1eafn&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 2: N\u1ed9i dung ng\u1eafn&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 3: N\u1ed9i dung d\u00e0i h\u01a1n m\u1ed9t ch\u00fat&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 4: N\u1ed9i dung d\u00e0i s\u1ebd v\u01b0\u1ee3t qu\u00e1 khung v\u00e0 hi\u1ec3n th\u1ecb thanh cu\u1ed9n&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 5: Ti\u1ebfp t\u1ee5c th\u00eam n\u1eefa...&lt;\/p&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, n\u1ed9i dung v\u01b0\u1ee3t chi\u1ec1u cao 100px, d\u1eabn \u0111\u1ebfn xu\u1ea5t hi\u1ec7n scroll d\u1ecdc, nh\u01b0ng kh\u00f4ng v\u01b0\u1ee3t qu\u00e1 chi\u1ec1u r\u1ed9ng n\u00ean kh\u00f4ng xu\u1ea5t hi\u1ec7n scroll ngang:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"189\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-20.png\" alt=\"\" class=\"wp-image-92126\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-20.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-20-300x71.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-20-640x151.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-20-200x47.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-20-768x182.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.overflow-hidden<\/code><\/strong>: D\u00f9ng khi b\u1ea1n mu\u1ed1n ch\u1eb7n hi\u1ec3n th\u1ecb ph\u1ea7n n\u1ed9i dung v\u01b0\u1ee3t ra ngo\u00e0i k\u00edch th\u01b0\u1edbc \u0111\u00e3 gi\u1edbi h\u1ea1n. T\u00f9y ch\u1ecdn n\u00e0y khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng th\u1ec3 cu\u1ed9n \u0111\u1ec3 xem ph\u1ea7n b\u1ecb che. Class n\u00e0y ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n giao di\u1ec7n nh\u01b0 card, thumbnail h\u00ecnh \u1ea3nh ho\u1eb7c ph\u1ea7n preview n\u1ed9i dung, khi b\u1ea1n mu\u1ed1n gi\u1eef b\u1ed1 c\u1ee5c c\u1ed1 \u0111\u1ecbnh v\u00e0 kh\u00f4ng hi\u1ec3n th\u1ecb ph\u1ea7n d\u01b0.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"border overflow-hidden\" style=\"max-height: 100px;\"&gt;\n     &lt;p&gt;D\u00f2ng 1: N\u1ed9i dung ng\u1eafn&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 2: N\u1ed9i dung ng\u1eafn&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 3: N\u1ed9i dung d\u00e0i h\u01a1n m\u1ed9t ch\u00fat&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 4: N\u1ed9i dung d\u00e0i s\u1ebd v\u01b0\u1ee3t qu\u00e1 khung v\u00e0 hi\u1ec3n th\u1ecb thanh cu\u1ed9n&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 5: Ti\u1ebfp t\u1ee5c th\u00eam n\u1eefa...&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3, scrollbar b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a, v\u00e0 n\u1ed9i dung b\u1ecb che khu\u1ea5t:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"206\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-21.png\" alt=\"\" class=\"wp-image-92127\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-21.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-21-300x77.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-21-640x165.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-21-200x52.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-21-768x198.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><strong>.overflow-visible<\/strong>:<\/code> \u0110\u00e2y th\u01b0\u1eddng l\u00e0 t\u00f9y ch\u1ecdn m\u1eb7c \u0111\u1ecbnh c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed. V\u1edbi t\u00f9y ch\u1ecdn n\u00e0y, n\u1ebfu n\u1ed9i dung v\u01b0\u1ee3t kh\u1ecfi khung ch\u1ee9a v\u1eabn s\u1ebd hi\u1ec3n th\u1ecb tr\u00e0n ra ngo\u00e0i, kh\u00f4ng c\u00f3 thanh cu\u1ed9n. \u1ee8ng d\u1ee5ng c\u1ee7a class n\u00e0y th\u01b0\u1eddng l\u00e0 c\u00e1c tooltip, popover ho\u1eb7c badge, khi b\u1ea1n c\u1ea7n n\u1ed9i dung hi\u1ec3n th\u1ecb tr\u00e0n ra ngo\u00e0i container m\u00e0 kh\u00f4ng b\u1ecb c\u1eaft. V\u00ed d\u1ee5:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"border overflow-visible\" style=\"max-height: 100px;\"&gt;\n     &lt;p&gt;D\u00f2ng 1: N\u1ed9i dung ng\u1eafn&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 2: N\u1ed9i dung ng\u1eafn&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 3: N\u1ed9i dung d\u00e0i h\u01a1n&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 4: V\u01b0\u1ee3t qu\u00e1 khung, nh\u01b0ng v\u1eabn tr\u00e0n ra ngo\u00e0i khung vi\u1ec1n&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 5: B\u1ea1n s\u1ebd th\u1ea5y ch\u1eef \u201cxuy\u00ean\u201d ra ngo\u00e0i h\u1ed9p n\u00e0y&lt;\/p&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"346\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-22.png\" alt=\"\" class=\"wp-image-92128\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-22.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-22-300x130.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-22-640x277.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-22-200x86.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-22-768x332.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><strong>.overflow-scroll<\/strong>:<\/code> Thanh cu\u1ed9n s\u1ebd lu\u00f4n \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t b\u1ea5t k\u1ec3 n\u1ed9i dung trong v\u00f9ng ch\u1ee9a c\u00f3 nhi\u1ec1u hay \u00edt. Khi n\u1ed9i dung kh\u00f4ng v\u01b0\u1ee3t qu\u00e1 khung ch\u1ee9a, thanh scrollbar s\u1ebd tr\u1edf n\u00ean d\u01b0 th\u1eeba v\u00e0 t\u1ea1o ra r\u00e3nh \u1edf vi\u1ec1n v\u00f9ng ch\u1ee9a. Class n\u00e0y r\u1ea5t h\u1eefu \u00edch trong khung ch\u1ee9a code, b\u1ea3ng log ho\u1eb7c v\u00f9ng d\u1eef li\u1ec7u c\u1ed1 \u0111\u1ecbnh, n\u01a1i b\u1ea1n mu\u1ed1n ng\u01b0\u1eddi d\u00f9ng nh\u1eadn bi\u1ebft ngay r\u1eb1ng khu v\u1ef1c n\u00e0y c\u00f3 th\u1ec3 cu\u1ed9n. V\u00ed d\u1ee5:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"border overflow-scroll\" style=\"max-height: 100px;\"&gt;\n     &lt;p&gt;D\u00f2ng 1: N\u1ed9i dung ng\u1eafn&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 2: N\u1ed9i dung ng\u1eafn&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 3: N\u1ed9i dung d\u00e0i h\u01a1n&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 4: V\u01b0\u1ee3t qu\u00e1 khung, nh\u01b0ng v\u1eabn tr\u00e0n ra ngo\u00e0i khung vi\u1ec1n&lt;\/p&gt;\n     &lt;p&gt;D\u00f2ng 5: B\u1ea1n s\u1ebd th\u1ea5y ch\u1eef \u201cxuy\u00ean\u201d ra ngo\u00e0i h\u1ed9p n\u00e0y&lt;\/p&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"mt-4 border overflow-scroll\" style=\"max-height: 100px;\"&gt;\n     &lt;p&gt;D\u00f2ng 1: N\u1ed9i dung ng\u1eafn&lt;\/p&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"343\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-23.png\" alt=\"\" class=\"wp-image-92129\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-23.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-23-300x128.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-23-640x274.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-23-200x86.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-23-768x329.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>L\u01b0u \u00fd, ngay c\u1ea3 khi d\u00f9ng <strong><code>overflow: scroll;<\/code><\/strong>, thanh cu\u1ed9n c\u00f3 th\u1ec3 ch\u1ec9 hi\u1ec3n th\u1ecb khi ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n cu\u1ed9n, ch\u1ee9 kh\u00f4ng lu\u00f4n lu\u00f4n hi\u1ec3n th\u1ecb. \u0110i\u1ec1u n\u00e0y do ph\u1ee5 thu\u1ed9c v\u00e0o c\u00e0i \u0111\u1eb7t <strong><code>overlay scrollbars<\/code><\/strong> c\u1ee7a h\u1ec7 \u0111i\u1ec1u h\u00e0nh\/tr\u00ecnh duy\u1ec7t (\u0111\u1eb7c bi\u1ec7t macOS). CSS kh\u00f4ng th\u1ec3 \u00e9p \u0111i\u1ec1u n\u00e0y n\u1ebfu c\u00e0i \u0111\u1eb7t \u0111ang \u1ea9n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-di\u1ec1u-khi\u1ec3n-scrollbar-theo-hai-chi\u1ec1u\"><strong>\u0110i\u1ec1u khi\u1ec3n scrollbar theo hai chi\u1ec1u<\/strong><\/h3>\n\n\n\n<p>Bootstrap kh\u00f4ng c\u00f3 s\u1eb5n class \u0111\u1ec3 th\u00eam scrollbar cho t\u1eebng tr\u1ee5c d\u1ecdc v\u00e0 ngang. N\u1ebfu b\u1ea1n c\u1ea7n \u0111i\u1ec1u khi\u1ec3n theo tr\u1ee5c, b\u1ea1n ph\u1ea3i b\u1ed5 sung c\u00e1c class v\u1edbi CSS th\u1ee7 c\u00f4ng. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;style&gt;\n   \/* \u0110i\u1ec1u khi\u1ec3n tr\u1ee5c d\u1ecdc *\/\n   .overflow-y-auto   { overflow-y: auto !important; }\n   .overflow-y-scroll { overflow-y: scroll !important; }\n   .overflow-y-hidden { overflow-y: hidden !important; }\n    \/* \u0110i\u1ec1u khi\u1ec3n tr\u1ee5c ngang *\/\n   .overflow-x-auto   { overflow-x: auto !important; }\n   .overflow-x-scroll { overflow-x: scroll !important; }\n   .overflow-x-hidden { overflow-x: hidden !important; }\n &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-overflow\"><strong>Responsive overflow<\/strong><\/h3>\n\n\n\n<p>Bootstrap cung c\u1ea5p 4 l\u1edbp ti\u1ec7n \u00edch \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n scrollbar nh\u01b0ng c\u00e1c l\u1edbp n\u00e0y m\u1eb7c \u0111\u1ecbnh kh\u00f4ng c\u00f3 bi\u1ebfn th\u1ec3 theo breakpoint trong Bootstrap (v\u00ed d\u1ee5 .overflow-sm-auto, .overflow-md-hidden&#8230;). N\u1ebfu b\u1ea1n mu\u1ed1n thay \u0111\u1ed5i c\u00e1ch hi\u1ec3n th\u1ecb scrollbar t\u00f9y theo k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m theo 2 c\u00e1ch:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-css-thu\u1ea7n-v\u1edbi-media-queries\"><strong>CSS thu\u1ea7n v\u1edbi media queries<\/strong><\/h4>\n\n\n\n<p>V\u1edbi media queries, b\u1ea1n \u0111\u1ecbnh ngh\u0129a class ri\u00eang cho t\u1eebng breakpoint. V\u00ed d\u1ee5:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf (mobile &lt;576px): ch\u1ec9 cho cu\u1ed9n ngang, ch\u1eb7n cu\u1ed9n d\u1ecdc.<\/li>\n\n\n\n<li>Tr\u00ean m\u00e0n h\u00ecnh v\u1eeba (tablet \u2265768px): ch\u1ec9 cho cu\u1ed9n d\u1ecdc, ch\u1eb7n cu\u1ed9n ngang.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;style&gt;\n   @media (max-width: 575px) {\n     .ov-sm-x-auto-y-hidden { overflow-x: auto !important; overflow-y: hidden !important; }\n   }\n   @media (min-width: 768px) {\n     .ov-md-y-auto-x-hidden { overflow-y: auto !important; overflow-x: hidden !important; }\n   }\n &lt;\/style&gt;\n &lt;div class=\"border ov-sm-x-auto-y-hidden ov-md-y-auto-x-hidden\" style=\"max-height:200px;\"&gt;\n   &lt;!-- n\u1ed9i dung --&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dung-bootstrap-utility-api-sass\"><strong>D\u00f9ng Bootstrap Utility API (Sass)<\/strong><\/h4>\n\n\n\n<p>N\u1ebfu b\u1ea1n build Bootstrap t\u1eeb Sass, c\u00f3 th\u1ec3 b\u1eadt responsive cho utility overflow:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ _custom.scss\n$utilities: map-merge(\n $utilities,\n (\n   \"overflow\": (\n     property: overflow,\n     class: overflow,\n     responsive: true, \/\/ t\u1ea1o .overflow-sm-auto, .overflow-md-hidden, ...\n     values: auto hidden visible scroll\n   )\n )\n);\n\n\n\/\/ Th\u00eam tr\u1ee5c y\/x n\u1ebfu mu\u1ed1n (custom)\n$utilities: map-merge(\n $utilities,\n (\n   \"overflow-y\": (\n     property: overflow-y,\n     class: overflow-y,\n     responsive: true,\n     values: auto hidden visible scroll\n   ),\n   \"overflow-x\": (\n     property: overflow-x,\n     class: overflow-x,\n     responsive: true,\n     values: auto hidden visible scroll\n   )\n )\n);<\/code><\/pre>\n\n\n\n<p>Sau khi bi\u00ean d\u1ecbch, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"border overflow-auto overflow-md-hidden\" style=\"max-height: 180px;\"&gt;\n   ...\n &lt;\/div&gt;\n\n\n &lt;div class=\"border overflow-y-auto overflow-y-lg-hidden\" style=\"max-height: 220px;\"&gt;\n   ...\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-scrollbar-trong-cac-component-c\u1ee7a-bootstrap\"><span class=\"ez-toc-section\" id=\"Scrollbar_trong_cac_component_cua_Bootstrap\"><\/span><strong>Scrollbar trong c\u00e1c component c\u1ee7a Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scrollbar-trong-modal\"><strong>Scrollbar trong modal<\/strong><\/h3>\n\n\n\n<p>Modal trong Bootstrap m\u1eb7c \u0111\u1ecbnh s\u1ebd kh\u00f3a thanh cu\u1ed9n c\u1ee7a to\u00e0n b\u1ed9 trang (&lt;body&gt;). \u0110i\u1ec1u n\u00e0y \u0111\u1ea3m b\u1ea3o khi modal m\u1edf, ng\u01b0\u1eddi d\u00f9ng t\u1eadp trung v\u00e0o n\u1ed9i dung b\u00ean trong n\u00f3 m\u00e0 kh\u00f4ng cu\u1ed9n l\u1eabn v\u1edbi trang ch\u00ednh. Nh\u01b0ng n\u1ebfu modal c\u00f3 qu\u00e1 nhi\u1ec1u n\u1ed9i dung, b\u1ea1n s\u1ebd c\u1ea7n thanh cu\u1ed9n n\u1eb1m trong modal ch\u1ee9 kh\u00f4ng ph\u1ea3i \u0111\u1ec3 trang web b\u1ecb tr\u00e0n.<\/p>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 s\u1eb5n c\u00e1ch gi\u1ea3i quy\u1ebft v\u1edbi class <strong>.modal-dialog-scrollable<\/strong>. Khi s\u1eed d\u1ee5ng class n\u00e0y, ph\u1ea7n n\u1ed9i dung (<strong>.modal-body<\/strong>) s\u1ebd tr\u1edf th\u00e0nh v\u00f9ng cu\u1ed9n, trong khi header v\u00e0 footer v\u1eabn c\u1ed1 \u0111\u1ecbnh ph\u00eda tr\u00ean v\u00e0 d\u01b0\u1edbi.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- N\u00fat m\u1edf modal --&gt;\n&lt;button class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#modalWithScroll\"&gt;\n M\u1edf modal\n&lt;\/button&gt;\n\n\n&lt;!-- Modal --&gt;\n&lt;div class=\"modal fade\" id=\"modalWithScroll\" tabindex=\"-1\" aria-labelledby=\"withScrollLabel\" aria-hidden=\"true\"&gt;\n &lt;div class=\"modal-dialog\"&gt;\n   &lt;div class=\"modal-content\"&gt;\n     &lt;div class=\"modal-header\"&gt;\n       &lt;h5 id=\"withScrollLabel\" class=\"modal-title\"&gt;Ti\u00eau \u0111\u1ec1&lt;\/h5&gt;\n       &lt;button class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"\u0110\u00f3ng\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-body\" style=\"max-height: 30vh; overflow-y: auto;\"&gt;\n       &lt;p&gt;N\u1ed9i dung d\u00e0i&lt;\/p&gt;\n       &lt;p&gt;\u0110o\u1ea1n 1...&lt;\/p&gt;&lt;p&gt;\u0110o\u1ea1n 2...&lt;\/p&gt;&lt;p&gt;\u0110o\u1ea1n 3...&lt;\/p&gt;&lt;p&gt;\u0110o\u1ea1n 4...&lt;\/p&gt;\n       &lt;p&gt;\u0110o\u1ea1n 5...&lt;\/p&gt;&lt;p&gt;\u0110o\u1ea1n 6...&lt;\/p&gt;&lt;p&gt;\u0110o\u1ea1n 7...&lt;\/p&gt;&lt;p&gt;\u0110o\u1ea1n 8...&lt;\/p&gt;\n       &lt;p&gt;\u0110o\u1ea1n 9...&lt;\/p&gt;&lt;p&gt;\u0110o\u1ea1n 10...&lt;\/p&gt;&lt;p&gt;\u0110o\u1ea1n 11...&lt;\/p&gt;&lt;p&gt;\u0110o\u1ea1n 12...&lt;\/p&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-footer\"&gt;\n       &lt;button class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"&gt;\u0110\u00f3ng&lt;\/button&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3, scrollbar xu\u1ea5t hi\u1ec7n \u0111\u1ec3 cu\u1ed9n n\u1ed9i dung c\u1ee7a ph\u1ea7n modal body:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"746\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-24.png\" alt=\"\" class=\"wp-image-92130\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-24.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-24-300x280.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-24-640x597.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-24-200x187.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-24-768x716.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-offcanvas-v\u1edbi-offcanvas-body\"><strong>Offcanvas v\u1edbi .offcanvas-body<\/strong><\/h3>\n\n\n\n<p>Offcanvas l\u00e0 th\u00e0nh ph\u1ea7n th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 l\u00e0m menu tr\u01b0\u1ee3t t\u1eeb c\u1ea1nh tr\u00e1i ho\u1eb7c ph\u1ea3i. Do thi\u1ebft k\u1ebf th\u01b0\u1eddng cao b\u1eb1ng chi\u1ec1u cao to\u00e0n b\u1ed9 tr\u00ecnh duy\u1ec7t, n\u1ebfu n\u1ed9i dung nhi\u1ec1u h\u01a1n chi\u1ec1u cao n\u00e0y th\u00ec b\u1ea1n c\u1ea7n cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n trong ph\u1ea7n .offcanvas-body.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button class=\"btn btn-primary\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#sidebar\"&gt;\n     M\u1edf menu\n   &lt;\/button&gt;\n   &lt;div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"sidebar\" aria-labelledby=\"sidebarLabel\"&gt;\n     &lt;div class=\"offcanvas-header\"&gt;\n       &lt;h5 id=\"sidebarLabel\"&gt;Menu&lt;\/h5&gt;\n       &lt;button class=\"btn-close\" data-bs-dismiss=\"offcanvas\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"offcanvas-body overflow-scroll\" style=\"max-height: 50vh;\"&gt;\n       &lt;p&gt;M\u1ee5c 1&lt;\/p&gt;\n       &lt;p&gt;M\u1ee5c 2&lt;\/p&gt;\n       &lt;p&gt;M\u1ee5c 3&lt;\/p&gt;\n       &lt;p&gt;M\u1ee5c 4&lt;\/p&gt;\n       &lt;p&gt;M\u1ee5c 5&lt;\/p&gt;\n       &lt;p&gt;M\u1ee5c 6&lt;\/p&gt;\n       &lt;p&gt;M\u1ee5c 7&lt;\/p&gt;\n       &lt;p&gt;M\u1ee5c 8&lt;\/p&gt;\n       &lt;p&gt;M\u1ee5c 9&lt;\/p&gt;\n       &lt;p&gt;M\u1ee5c 10&lt;\/p&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"286\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-25.png\" alt=\"\" class=\"wp-image-92131\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-25.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-25-300x107.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-25-640x229.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-25-200x72.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-25-768x275.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-25-1536x549.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scrollbar-trong-dropdown-menu\"><strong>Scrollbar trong Dropdown menu<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t dropdown menu qu\u00e1 d\u00e0i c\u00f3 th\u1ec3 tr\u00e0n h\u1ebft m\u00e0n h\u00ecnh, khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng kh\u00f3 ch\u1ecdn l\u1ef1a. C\u00e1ch x\u1eed l\u00fd l\u00e0 \u0111\u1eb7t gi\u1edbi h\u1ea1n chi\u1ec1u cao cho menu v\u00e0 th\u00eam kh\u1ea3 n\u0103ng cu\u1ed9n b\u00ean trong.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"dropdown\"&gt;\n     &lt;button class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" data-bs-display=\"static\"&gt;\n       Ch\u1ecdn m\u1ee5c\n     &lt;\/button&gt;\n  \n     &lt;ul class=\"dropdown-menu overflow-auto\" style=\"max-height: 200px;\"&gt;\n       &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 1&lt;\/a&gt;&lt;\/li&gt;\n       &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 2&lt;\/a&gt;&lt;\/li&gt;\n       &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 3&lt;\/a&gt;&lt;\/li&gt;\n       &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 4&lt;\/a&gt;&lt;\/li&gt;\n       &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 5&lt;\/a&gt;&lt;\/li&gt;\n       &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 6&lt;\/a&gt;&lt;\/li&gt;\n       &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;M\u1ee5c 7&lt;\/a&gt;&lt;\/li&gt;\n     &lt;\/ul&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"418\" height=\"608\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-26.png\" alt=\"\" class=\"wp-image-92133\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-26.png 418w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-26-206x300.png 206w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-26-138x200.png 138w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/figure>\n\n\n\n<p>Nh\u1edd v\u1eady, menu s\u1ebd lu\u00f4n g\u1ecdn trong m\u1ed9t khung c\u1ed1 \u0111\u1ecbnh, nh\u01b0ng v\u1eabn d\u1ec5 d\u00e0ng cu\u1ed9n \u0111\u1ec3 xem th\u00eam l\u1ef1a ch\u1ecdn.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scrollbar-trong-b\u1ea3ng-d\u1eef-li\u1ec7u-table\"><strong>Scrollbar trong B\u1ea3ng d\u1eef li\u1ec7u (Table)<\/strong><\/h3>\n\n\n\n<p>Trong th\u1ef1c t\u1ebf, b\u1ea3ng d\u1eef li\u1ec7u th\u01b0\u1eddng c\u00f3 r\u1ea5t nhi\u1ec1u c\u1ed9t. N\u1ebfu c\u1ed1 \u00e9p t\u1ea5t c\u1ea3 c\u1ed9t hi\u1ec3n th\u1ecb trong m\u1ed9t khung nh\u1ecf, ch\u1eef s\u1ebd b\u1ecb co l\u1ea1i kh\u00f3 \u0111\u1ecdc. N\u1ebfu \u0111\u1ec3 b\u1ea3ng r\u1ed9ng t\u1ef1 nhi\u00ean, n\u00f3 c\u00f3 th\u1ec3 l\u00e0m v\u1ee1 layout tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf.<\/p>\n\n\n\n<p>Gi\u1ea3i ph\u00e1p l\u00e0 cho b\u1ea3ng cu\u1ed9n theo chi\u1ec1u ngang (horizontal scroll) b\u1eb1ng c\u00e1ch b\u1ecdc to\u00e0n b\u1ed9 <strong>table<\/strong> trong th\u1ebb <strong>div<\/strong> c\u00f3 b\u1eadt <strong>scrollbar<\/strong>. Khi \u0111\u00f3, ng\u01b0\u1eddi d\u00f9ng ch\u1ec9 c\u1ea7n k\u00e9o ngang \u0111\u1ec3 xem c\u00e1c c\u1ed9t ti\u1ebfp theo, trong khi b\u1ed1 c\u1ee5c trang v\u1eabn gi\u1eef nguy\u00ean. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;div class=\"card-body p-0 overflow-auto\"&gt;\n       &lt;table class=\"table mb-0\" style=\"min-width: 800px;\"&gt;\n         &lt;thead&gt;\n           &lt;tr&gt;\n             &lt;th&gt;ID&lt;\/th&gt;\n             &lt;th&gt;H\u1ecd t\u00ean&lt;\/th&gt;\n             &lt;th&gt;Email&lt;\/th&gt;\n             &lt;th&gt;Vai tr\u00f2&lt;\/th&gt;\n             &lt;th&gt;Ng\u00e0y t\u1ea1o&lt;\/th&gt;\n           &lt;\/tr&gt;\n         &lt;\/thead&gt;\n         &lt;tbody&gt;\n           &lt;tr&gt;\n             &lt;td&gt;1&lt;\/td&gt;\n             &lt;td&gt;Lan&lt;\/td&gt;\n             &lt;td&gt;lan@example.com&lt;\/td&gt;\n             &lt;td&gt;Admin&lt;\/td&gt;\n             &lt;td&gt;2025-09-01&lt;\/td&gt;\n           &lt;\/tr&gt;\n           &lt;tr&gt;\n             &lt;td&gt;2&lt;\/td&gt;\n             &lt;td&gt;Minh&lt;\/td&gt;\n             &lt;td&gt;minh@example.com&lt;\/td&gt;\n             &lt;td&gt;User&lt;\/td&gt;\n             &lt;td&gt;2025-09-10&lt;\/td&gt;\n           &lt;\/tr&gt;\n         &lt;\/tbody&gt;\n       &lt;\/table&gt;\n     &lt;\/div<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng <strong><code>.overflow-auto<\/code><\/strong> (class c\u00f3 s\u1eb5n trong Bootstrap) \u0111\u1ec3 b\u1eadt thanh cu\u1ed9n khi c\u1ea7n<\/li>\n\n\n\n<li>V\u00ed d\u1ee5 d\u00f9ng <strong><code>min-width: 800px;<\/code><\/strong> \u0111\u1ec3 bu\u1ed9c b\u1ea3ng r\u1ed9ng h\u01a1n container, t\u1eeb \u0111\u00f3 scrollbar ngang xu\u1ea5t hi\u1ec7n<\/li>\n\n\n\n<li>Ph\u1ea7n card-body gi\u1eef vai tr\u00f2 nh\u01b0 \u201ckhung nh\u00ecn\u201d (viewport), ng\u01b0\u1eddi d\u00f9ng ch\u1ec9 c\u1ea7n cu\u1ed9n ngang trong \u0111\u00f3<\/li>\n<\/ul>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"268\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-27.png\" alt=\"\" class=\"wp-image-92134\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-27.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-27-300x100.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-27-640x214.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-27-200x67.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-27-768x257.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-b\u1ea3ng-t\u1ed5ng-h\u1ee3p-cac-class-ti\u1ec7n-ich-thao-tac-v\u1edbi-scrollbar-bootstrap\"><span class=\"ez-toc-section\" id=\"Bang_tong_hop_cac_class_tien_ich_thao_tac_voi_Scrollbar_Bootstrap\"><\/span><strong>B\u1ea3ng t\u1ed5ng h\u1ee3p c\u00e1c class ti\u1ec7n \u00edch thao t\u00e1c v\u1edbi Scrollbar Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>C\u00f4ng d\u1ee5ng<\/strong><\/td><\/tr><tr><td><strong>.overflow-auto<\/strong><\/td><td>Hi\u1ec3n th\u1ecb thanh cu\u1ed9n khi n\u1ed9i dung v\u01b0\u1ee3t khung<\/td><\/tr><tr><td><strong>.overflow-hidden<\/strong><\/td><td>\u1ea8n to\u00e0n b\u1ed9 n\u1ed9i dung v\u01b0\u1ee3t khung, kh\u00f4ng t\u1ea1o ra thanh cu\u1ed9n<\/td><\/tr><tr><td><strong>.overflow-visible<\/strong><\/td><td>Hi\u1ec3n th\u1ecb n\u1ed9i dung tr\u00e0n ra kh\u1ecfi khung, kh\u00f4ng t\u1ea1o thanh cu\u1ed9n<\/td><\/tr><tr><td><strong>.overflow-scroll<\/strong><\/td><td>Lu\u00f4n b\u1eadt v\u00f9ng cu\u1ed9n (d\u00f9 \u00edt n\u1ed9i dung)<\/td><\/tr><tr><td><strong>.modal-dialog-scrollable<\/strong><\/td><td>Cho ph\u00e9p n\u1ed9i dung modal-body cu\u1ed9n trong modal<\/td><\/tr><tr><td><strong>.offcanvas-body + .overflow-(auto\/scroll)<\/strong><\/td><td>Cho ph\u00e9p cu\u1ed9n n\u1ed9i dung trong offcanvas<\/td><\/tr><tr><td><strong>.dropdown-menu + .overflow-(auto\/scroll)<\/strong><\/td><td>Cu\u1ed9n n\u1ed9i dung trong danh s\u00e1ch t\u00f9y ch\u1ecdn<\/td><\/tr><tr><td><strong>.table-responsive (component) + .overflow-(auto\/scroll)<\/strong><\/td><td>Cho ph\u00e9p b\u1ea3ng (table) cu\u1ed9n ngang trong m\u00e0n h\u00ecnh nh\u1ecf ho\u1eb7c s\u1ed1 l\u01b0\u1ee3ng c\u1ed9t qu\u00e1 nhi\u1ec1u<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-scrollspy-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Scrollspy_trong_Bootstrap\"><\/span><strong>Scrollspy trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gi\u1edbi-thi\u1ec7u-v\u1ec1-bootstrap-scrollspy\"><strong>Gi\u1edbi thi\u1ec7u v\u1ec1 Bootstrap Scrollspy<\/strong><\/h3>\n\n\n\n<p>Scrollspy l\u00e0 m\u1ed9t t\u00ednh n\u0103ng h\u1eefu \u00edch c\u1ee7a Bootstrap gi\u00fap b\u1ea1n theo d\u00f5i v\u1ecb tr\u00ed cu\u1ed9n hi\u1ec7n t\u1ea1i trong trang v\u00e0 t\u1ef1 \u0111\u1ed9ng c\u1eadp nh\u1eadt tr\u1ea1ng th\u00e1i active c\u1ee7a menu \u0111i\u1ec1u h\u01b0\u1edbng (navigation).<\/p>\n\n\n\n<p>N\u00f3i c\u00e1ch kh\u00e1c, khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n n\u1ed9i dung, m\u1ee5c menu t\u01b0\u01a1ng \u1ee9ng trong thanh \u0111i\u1ec1u h\u01b0\u1edbng s\u1ebd \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u n\u1ed5i b\u1eadt. \u0110\u00e2y l\u00e0 k\u1ef9 thu\u1eadt th\u01b0\u1eddng th\u1ea5y trong c\u00e1c trang landing page, documentation ho\u1eb7c blog d\u00e0i, n\u01a1i c\u1ea7n \u0111i\u1ec1u h\u01b0\u1edbng nhanh \u0111\u1ebfn t\u1eebng ph\u1ea7n n\u1ed9i dung.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 th\u1ef1c t\u1ebf: B\u1ea1n c\u00f3 m\u1ed9t thanh menu b\u00ean tr\u00e1i v\u1edbi c\u00e1c m\u1ee5c: Gi\u1edbi thi\u1ec7u, T\u00ednh n\u0103ng, Li\u00ean h\u1ec7. Khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n xu\u1ed1ng ph\u1ea7n \u201cT\u00ednh n\u0103ng\u201d, menu s\u1ebd t\u1ef1 \u0111\u1ed9ng highlight m\u1ee5c \u0111\u00f3. Nh\u1edd v\u1eady, ng\u01b0\u1eddi d\u00f9ng lu\u00f4n bi\u1ebft m\u00ecnh \u0111ang \u1edf \u0111\u00e2u trong trang.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-kich-ho\u1ea1t-scrollspy-b\u1eb1ng-data-attribute\"><strong>K\u00edch ho\u1ea1t Scrollspy b\u1eb1ng data attribute<\/strong><\/h3>\n\n\n\n<p>Bootstrap cho ph\u00e9p b\u1ea1n b\u1eadt Scrollspy m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft JavaScript th\u1ee7 c\u00f4ng, ch\u1ec9 c\u1ea7n g\u1eafn <strong><code>data-bs-spy=\u201cscroll\u201d<\/code><\/strong> v\u00e0 c\u00e1c thu\u1ed9c t\u00ednh li\u00ean quan. C\u00e1c b\u01b0\u1edbc c\u01a1 b\u1ea3n:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>T\u1ea1o thanh menu \u0111i\u1ec1u h\u01b0\u1edbng v\u1edbi c\u00e1c link tr\u1ecf \u0111\u1ebfn ID c\u1ee7a t\u1eebng section n\u1ed9i dung.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;nav id=\"navbar-example\" class=\"navbar bg-light px-3 mb-3\"&gt;\n   &lt;ul class=\"nav nav-pills\"&gt;\n     &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#section1\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#section2\"&gt;T\u00ednh n\u0103ng&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#section3\"&gt;H\u01b0\u1edbng d\u1eabn&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#section4\"&gt;Li\u00ean h\u1ec7&lt;\/a&gt;&lt;\/li&gt;\n   &lt;\/ul&gt;\n &lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>B\u1ecdc n\u1ed9i dung c\u1ea7n theo d\u00f5i trong m\u1ed9t th\u1ebb c\u00f3 thu\u1ed9c t\u00ednh:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>data-bs-spy=\u201cscroll\u201d<\/code><\/strong>: b\u1eadt Scrollspy<\/li>\n\n\n\n<li><strong><code>data-bs-target=\u201c#navbar-example\u201d<\/code><\/strong>: tr\u1ecf \u0111\u1ebfn menu c\u1ea7n c\u1eadp nh\u1eadt<\/li>\n\n\n\n<li><strong><code>data-bs-offset=\u201c...\u201d<\/code><\/strong>: (t\u00f9y ch\u1ecdn) kho\u1ea3ng c\u00e1ch t\u00ednh t\u1eeb tr\u00ean c\u00f9ng khi x\u00e1c \u0111\u1ecbnh section active<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div data-bs-spy=\"scroll\" data-bs-target=\"#navbar-example\" data-bs-offset=\"0\" class=\"p-3 rounded-2 border overflow-auto position-relative\" tabindex=\"0\" style=\"height: 300px;\"&gt;\n\n\n   &lt;!-- Section 1 --&gt;\n   &lt;h4 id=\"section1\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/h4&gt;\n   &lt;p&gt;Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi v\u00ed d\u1ee5 Scrollspy.&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n gi\u1edbi thi\u1ec7u n\u1ed9i dung. \u0110\u1ec3 Scrollspy ho\u1ea1t \u0111\u1ed9ng&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n d\u00e0i \u0111\u1ec3 b\u1ea1n th\u1ea5y r\u00f5 hi\u1ec7u \u1ee9ng khi cu\u1ed9n.&lt;\/p&gt;\n\n\n   &lt;!-- Section 2 --&gt;\n   &lt;h4 id=\"section2\"&gt;T\u00ednh n\u0103ng&lt;\/h4&gt;\n   &lt;p&gt;Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi v\u00ed d\u1ee5 Scrollspy.&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n gi\u1edbi thi\u1ec7u n\u1ed9i dung. \u0110\u1ec3 Scrollspy ho\u1ea1t \u0111\u1ed9ng&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n d\u00e0i \u0111\u1ec3 b\u1ea1n th\u1ea5y r\u00f5 hi\u1ec7u \u1ee9ng khi cu\u1ed9n.&lt;\/p&gt;\n\n\n   &lt;!-- Section 3 --&gt;\n   &lt;h4 id=\"section3\"&gt;H\u01b0\u1edbng d\u1eabn&lt;\/h4&gt;\n   &lt;p&gt;Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi v\u00ed d\u1ee5 Scrollspy.&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n gi\u1edbi thi\u1ec7u n\u1ed9i dung. \u0110\u1ec3 Scrollspy ho\u1ea1t \u0111\u1ed9ng&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n d\u00e0i \u0111\u1ec3 b\u1ea1n th\u1ea5y r\u00f5 hi\u1ec7u \u1ee9ng khi cu\u1ed9n.&lt;\/p&gt;\n\n\n   &lt;!-- Section 4 --&gt;\n   &lt;h4 id=\"section4\"&gt;Li\u00ean h\u1ec7&lt;\/h4&gt;\n   &lt;p&gt;Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi v\u00ed d\u1ee5 Scrollspy.&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n gi\u1edbi thi\u1ec7u n\u1ed9i dung. \u0110\u1ec3 Scrollspy ho\u1ea1t \u0111\u1ed9ng&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n d\u00e0i \u0111\u1ec3 b\u1ea1n th\u1ea5y r\u00f5 hi\u1ec7u \u1ee9ng khi cu\u1ed9n.&lt;\/p&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u0110\u1ea3m b\u1ea3o container n\u1ed9i dung c\u00f3 position: relative; (Bootstrap y\u00eau c\u1ea7u v\u1eady \u0111\u1ec3 t\u00ednh to\u00e1n ch\u00ednh x\u00e1c).<\/li>\n<\/ol>\n\n\n\n<p>Code \u0111\u1ea7y \u0111\u1ee7:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;!-- Thanh menu \u0111i\u1ec1u h\u01b0\u1edbng --&gt;\n &lt;nav id=\"navbar-example2\" class=\"navbar bg-light px-3 mb-3\"&gt;\n   &lt;ul class=\"nav nav-pills\"&gt;\n     &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#section1\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#section2\"&gt;T\u00ednh n\u0103ng&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#section3\"&gt;H\u01b0\u1edbng d\u1eabn&lt;\/a&gt;&lt;\/li&gt;\n     &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#section4\"&gt;Li\u00ean h\u1ec7&lt;\/a&gt;&lt;\/li&gt;\n   &lt;\/ul&gt;\n &lt;\/nav&gt;\n\n\n &lt;!-- Khung n\u1ed9i dung theo d\u00f5i scrollspy --&gt;\n &lt;div data-bs-spy=\"scroll\" data-bs-target=\"#navbar-example2\" data-bs-offset=\"0\" class=\"p-3 rounded-2 border overflow-auto position-relative\" tabindex=\"0\" style=\"height: 300px;\"&gt;\n\n\n   &lt;!-- Section 1 --&gt;\n   &lt;h4 id=\"section1\"&gt;Gi\u1edbi thi\u1ec7u&lt;\/h4&gt;\n   &lt;p&gt;Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi v\u00ed d\u1ee5 Scrollspy.&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n gi\u1edbi thi\u1ec7u n\u1ed9i dung. \u0110\u1ec3 Scrollspy ho\u1ea1t \u0111\u1ed9ng&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n d\u00e0i \u0111\u1ec3 b\u1ea1n th\u1ea5y r\u00f5 hi\u1ec7u \u1ee9ng khi cu\u1ed9n.&lt;\/p&gt;\n\n\n   &lt;!-- Section 2 --&gt;\n   &lt;h4 id=\"section2\"&gt;T\u00ednh n\u0103ng&lt;\/h4&gt;\n   &lt;p&gt;Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi v\u00ed d\u1ee5 Scrollspy.&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n gi\u1edbi thi\u1ec7u n\u1ed9i dung. \u0110\u1ec3 Scrollspy ho\u1ea1t \u0111\u1ed9ng&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n d\u00e0i \u0111\u1ec3 b\u1ea1n th\u1ea5y r\u00f5 hi\u1ec7u \u1ee9ng khi cu\u1ed9n.&lt;\/p&gt;\n\n\n   &lt;!-- Section 3 --&gt;\n   &lt;h4 id=\"section3\"&gt;H\u01b0\u1edbng d\u1eabn&lt;\/h4&gt;\n   &lt;p&gt;Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi v\u00ed d\u1ee5 Scrollspy.&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n gi\u1edbi thi\u1ec7u n\u1ed9i dung. \u0110\u1ec3 Scrollspy ho\u1ea1t \u0111\u1ed9ng&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n d\u00e0i \u0111\u1ec3 b\u1ea1n th\u1ea5y r\u00f5 hi\u1ec7u \u1ee9ng khi cu\u1ed9n.&lt;\/p&gt;\n\n\n   &lt;!-- Section 4 --&gt;\n   &lt;h4 id=\"section4\"&gt;Li\u00ean h\u1ec7&lt;\/h4&gt;\n   &lt;p&gt;Ch\u00e0o m\u1eebng b\u1ea1n \u0111\u1ebfn v\u1edbi v\u00ed d\u1ee5 Scrollspy.&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n gi\u1edbi thi\u1ec7u n\u1ed9i dung. \u0110\u1ec3 Scrollspy ho\u1ea1t \u0111\u1ed9ng&lt;\/p&gt;\n   &lt;p&gt;\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n d\u00e0i \u0111\u1ec3 b\u1ea1n th\u1ea5y r\u00f5 hi\u1ec7u \u1ee9ng khi cu\u1ed9n.&lt;\/p&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"319\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-28.png\" alt=\"\" class=\"wp-image-92135\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-28.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-28-300x119.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-28-640x255.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-28-200x80.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-28-768x306.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/image-28-1536x612.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-m\u1ed9t-s\u1ed1-l\u01b0u-y-khi-s\u1eed-d\u1ee5ng-scrollbar-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Mot_so_luu_y_khi_su_dung_Scrollbar_trong_Bootstrap\"><\/span><strong>M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Scrollbar trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi l\u00e0m vi\u1ec7c v\u1edbi Bootstrap, b\u1ea1n s\u1ebd th\u01b0\u1eddng xuy\u00ean c\u1ea7n x\u1eed l\u00fd n\u1ed9i dung tr\u00e0n (overflow). \u0110\u00e2y l\u00e0 l\u00fac scrollbar (thanh cu\u1ed9n) xu\u1ea5t hi\u1ec7n. N\u1ebfu d\u00f9ng kh\u00f4ng \u0111\u00fang c\u00e1ch, giao di\u1ec7n d\u1ec5 b\u1ecb v\u1ee1 b\u1ed1 c\u1ee5c ho\u1eb7c g\u00e2y kh\u00f3 ch\u1ecbu cho ng\u01b0\u1eddi d\u00f9ng. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng l\u01b0u \u00fd quan tr\u1ecdng b\u1ea1n n\u00ean bi\u1ebft:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scrollbar-khong-ph\u1ea3i-luc-nao-cung-hi\u1ec3n-th\u1ecb\"><strong>Scrollbar kh\u00f4ng ph\u1ea3i l\u00fac n\u00e0o c\u0169ng hi\u1ec3n th\u1ecb<\/strong><\/h3>\n\n\n\n<p>K\u1ec3 c\u1ea3 khi b\u1ea1n \u0111\u1eb7t <strong><code>overflow: scroll;<\/code><\/strong>, vi\u1ec7c thanh cu\u1ed9n c\u00f3 hi\u1ec3n th\u1ecb th\u01b0\u1eddng tr\u1ef1c hay kh\u00f4ng c\u00f2n ph\u1ee5 thu\u1ed9c v\u00e0o c\u00e0i \u0111\u1eb7t h\u1ec7 \u0111i\u1ec1u h\u00e0nh v\u00e0 tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean macOS v\u00e0 m\u1ed9t s\u1ed1 c\u1ea5u h\u00ecnh Windows, thanh cu\u1ed9n d\u1ea1ng overlay ch\u1ec9 hi\u1ec7n khi cu\u1ed9n ho\u1eb7c hover<\/li>\n\n\n\n<li>N\u1ebfu mu\u1ed1n lu\u00f4n hi\u1ec7n, c\u1ea7n b\u1eadt t\u00f9y ch\u1ecdn Always show scrollbars trong c\u00e0i \u0111\u1eb7t h\u1ec7 \u0111i\u1ec1u h\u00e0nh, ho\u1eb7c d\u00f9ng th\u01b0 vi\u1ec7n custom scrollbar nh\u01b0 <strong><code>SimpleBar<\/code><\/strong> ho\u1eb7c <strong><code>OverlayScrollbars<\/code><\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-k\u1ebft-h\u1ee3p-v\u1edbi-kich-th\u01b0\u1edbc-c\u1ed1-d\u1ecbnh\"><strong>K\u1ebft h\u1ee3p v\u1edbi k\u00edch th\u01b0\u1edbc c\u1ed1 \u0111\u1ecbnh<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 scrollbar ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang, b\u1ea1n c\u1ea7n gi\u1edbi h\u1ea1n chi\u1ec1u cao ho\u1eb7c chi\u1ec1u r\u1ed9ng c\u1ee7a container (b\u1eb1ng height, max-height, width, max-width). N\u1ebfu kh\u00f4ng gi\u1edbi h\u1ea1n, n\u1ed9i dung s\u1ebd ph\u00ecnh ra v\u00e0 kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 cu\u1ed9n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tranh-nh\u1ea3y-layout-khi-scrollbar-xu\u1ea5t-hi\u1ec7n\"><strong>Tr\u00e1nh \u201cnh\u1ea3y layout\u201d khi scrollbar xu\u1ea5t hi\u1ec7n<\/strong><\/h3>\n\n\n\n<p>Khi thanh cu\u1ed9n xu\u1ea5t hi\u1ec7n ho\u1eb7c bi\u1ebfn m\u1ea5t, b\u1ed1 c\u1ee5c trang c\u00f3 th\u1ec3 b\u1ecb x\u00f4 l\u1ec7ch (v\u00ed d\u1ee5 khi m\u1edf modal). \u0110\u1ec3 kh\u1eafc ph\u1ee5c, h\u00e3y d\u00f9ng thu\u1ed9c t\u00ednh <strong><code>scrollbar-gutter<\/code><\/strong> c\u1ee7a CSS. \u0110i\u1ec1u n\u00e0y gi\u00fap trang web lu\u00f4n ch\u1eeba kho\u1ea3ng tr\u1ed1ng cho scrollbar, tr\u00e1nh hi\u1ec7n t\u01b0\u1ee3ng nh\u1ea3y layout:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;style&gt;\n   body.modal-open {\n     scrollbar-gutter: stable;\n   }\n &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-ph\u1ed5-bi\u1ebfn-v\u1ec1-scrollbar-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_pho_bien_ve_Scrollbar_Bootstrap\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi ph\u1ed5 bi\u1ebfn v\u1ec1<\/strong> <strong>Scrollbar Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-tuy-ch\u1ec9nh-giao-di\u1ec7n-scrollbar-bootstrap\"><strong>L\u00e0m sao t\u00f9y ch\u1ec9nh giao di\u1ec7n Scrollbar Bootstrap?<\/strong><\/h3>\n\n\n\n<p>Bootstrap kh\u00f4ng cung c\u1ea5p utilities \u0111\u1ec3 thay \u0111\u1ed5i m\u00e0u s\u1eafc, \u0111\u1ed9 r\u1ed9ng hay h\u00ecnh d\u1ea1ng scrollbar. N\u1ebfu mu\u1ed1n, b\u1ea1n ph\u1ea3i d\u00f9ng CSS thu\u1ea7n ho\u1eb7c k\u1ebft h\u1ee3p th\u01b0 vi\u1ec7n ngo\u00e0i. M\u1ed9t s\u1ed1 c\u00e1ch ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng CSS thu\u1ea7n (\u00e1p d\u1ee5ng tr\u00ean Firefox):<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;style&gt;\n   .custom-scroll {\n     scrollbar-color: #0d6efd #f1f1f1;\n     scrollbar-width: thin;\n   }\n &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng CSS v\u1edbi WebKit (Chrome, Safari, Edge Chromium):<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;style&gt;\n   .custom-scroll::-webkit-scrollbar {\n     width: 8px;\n   }\n   .custom-scroll::-webkit-scrollbar-thumb {\n     background: #0d6efd;\n     border-radius: 4px;\n   }\n   .custom-scroll::-webkit-scrollbar-track {\n     background: #f1f1f1;\n   }\n &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-them-scrollbar-d\u1ecdc-cho-m\u1ed9t-div-trong-bootstrap\"><strong>L\u00e0m sao th\u00eam scrollbar d\u1ecdc cho m\u1ed9t div trong Bootstrap?<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p class overflow v\u1edbi gi\u1edbi h\u1ea1n chi\u1ec1u cao (max-height ho\u1eb7c height). V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"border overflow-auto\" style=\"max-height: 200px;\"&gt;\n   &lt;p&gt;D\u00f2ng 1...&lt;\/p&gt;\n   &lt;p&gt;D\u00f2ng 2...&lt;\/p&gt;\n   &lt;p&gt;D\u00f2ng 3...&lt;\/p&gt;\n   &lt;p&gt;D\u00f2ng 4...&lt;\/p&gt;\n   &lt;p&gt;D\u00f2ng 5...&lt;\/p&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-th\u1ec3-\u1ea9n-scrollbar-nh\u01b0ng-v\u1eabn-cu\u1ed9n-d\u01b0\u1ee3c-khong\"><strong>C\u00f3 th\u1ec3 \u1ea9n scrollbar nh\u01b0ng v\u1eabn cu\u1ed9n \u0111\u01b0\u1ee3c kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Trong CSS b\u1ea1n c\u00f3 th\u1ec3 \u1ea9n hi\u1ec3n th\u1ecb scrollbar nh\u01b0ng v\u1eabn cho ph\u00e9p cu\u1ed9n. Tuy nhi\u00ean, Bootstrap kh\u00f4ng cung c\u1ea5p s\u1eb5n class n\u00e0y, b\u1ea1n ph\u1ea3i t\u1ef1 vi\u1ebft CSS. V\u00ed d\u1ee5 s\u1eed d\u1ee5ng WebKit CSS (Chrome, Safari, Edge Chromium):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"hide-scrollbar\" style=\"max-height: 150px;\"&gt;\n   &lt;p&gt;N\u1ed9i dung d\u00e0i...&lt;\/p&gt;\n   &lt;p&gt;N\u1ed9i dung d\u00e0i...&lt;\/p&gt;\n   &lt;p&gt;N\u1ed9i dung d\u00e0i...&lt;\/p&gt;\n &lt;\/div&gt;\n\n\n &lt;style&gt;\n   .hide-scrollbar {\n     overflow-y: scroll;            \/* v\u1eabn cho ph\u00e9p cu\u1ed9n d\u1ecdc *\/\n     scrollbar-width: none;         \/* Firefox *\/\n   }\n   .hide-scrollbar::-webkit-scrollbar {\n     display: none;                 \/* \u1ea9n tr\u00ean Chrome\/Safari *\/\n   }\n &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Ng\u01b0\u1eddi d\u00f9ng v\u1eabn c\u00f3 th\u1ec3 cu\u1ed9n b\u1eb1ng chu\u1ed9t ho\u1eb7c c\u1ea3m \u1ee9ng, nh\u01b0ng kh\u00f4ng nh\u00ecn th\u1ea5y thanh cu\u1ed9n. \u0110\u00e2y l\u00e0 k\u1ef9 thu\u1eadt hay d\u00f9ng cho c\u00e1c thanh tr\u01b0\u1ee3t t\u00f9y bi\u1ebfn (custom UI).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Scrollbar trong Bootstrap kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t component ri\u00eang m\u00e0 \u0111\u01b0\u1ee3c ki\u1ec3m so\u00e1t th\u00f4ng qua h\u1ec7 th\u1ed1ng class overflow ti\u1ec7n \u00edch v\u00e0 s\u1ef1 k\u1ebft h\u1ee3p v\u1edbi CSS. Nh\u1edd \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng x\u1eed l\u00fd c\u00e1c t\u00ecnh hu\u1ed1ng n\u1ed9i dung tr\u00e0n trong modal, offcanvas, dropdown hay b\u1ea3ng d\u1eef li\u1ec7u m\u00e0 v\u1eabn gi\u1eef giao di\u1ec7n g\u1ecdn g\u00e0ng, th\u00e2n thi\u1ec7n v\u00e0 chuy\u00ean nghi\u1ec7p. V\u1edbi nh\u1eefng l\u01b0u \u00fd v\u00e0 v\u00ed d\u1ee5 th\u1ef1c t\u1ebf trong b\u00e0i vi\u1ebft n\u00e0y, ITviec hy v\u1ecdng b\u1ea1n \u0111\u00e3 n\u1eafm \u0111\u01b0\u1ee3c c\u00e1ch s\u1eed d\u1ee5ng scrollbar trong Bootstrap \u0111\u1ec3 \u00e1p d\u1ee5ng hi\u1ec7u qu\u1ea3 v\u00e0o d\u1ef1 \u00e1n web c\u1ee7a m\u00ecnh.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong qu\u00e1 tr\u00ecnh thi\u1ebft k\u1ebf giao di\u1ec7n website, c\u00f3 nh\u1eefng l\u00fac n\u1ed9i dung tr\u00ean giao di\u1ec7n c\u1ee7a b\u1ea1n nhi\u1ec1u \u0111\u1ebfn m\u1ee9c tr\u00e0n ra ngo\u00e0i khung \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn th\u1ea9m m\u1ef9. L\u00fac n\u00e0y, scrollbar (thanh cu\u1ed9n) ch\u00ednh l\u00e0 gi\u1ea3i ph\u00e1p h\u00e0ng \u0111\u1ea7u, n\u00f3 cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng xem th\u00eam m\u00e0 kh\u00f4ng l\u00e0m v\u1ee1 layout. V\u1edbi Bootstrap, [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":93368,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[10352,109],"tags":[],"class_list":["post-92123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-chuyen-mon-it","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Scrollbar Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u c\u00e1ch \u0111i\u1ec1u khi\u1ec3n scrollbar Bootstrap b\u1eb1ng Overflow Utilities, \u1ee9ng d\u1ee5ng trong modal, offcanvas, dropdown, b\u1ea3ng d\u1eef li\u1ec7u v\u00e0 Scrollspy.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scrollbar Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf\" \/>\n<meta property=\"og:description\" content=\"Trong qu\u00e1 tr\u00ecnh thi\u1ebft k\u1ebf giao di\u1ec7n website, c\u00f3 nh\u1eefng l\u00fac n\u1ed9i dung tr\u00ean giao di\u1ec7n c\u1ee7a b\u1ea1n nhi\u1ec1u \u0111\u1ebfn m\u1ee9c tr\u00e0n ra ngo\u00e0i khung \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn th\u1ea9m m\u1ef9. L\u00fac n\u00e0y,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-30T15:23:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-02T02:30:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/scrollbar-bootstrap-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"421\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Scrollbar Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf - ITviec Blog","description":"T\u00ecm hi\u1ec3u c\u00e1ch \u0111i\u1ec1u khi\u1ec3n scrollbar Bootstrap b\u1eb1ng Overflow Utilities, \u1ee9ng d\u1ee5ng trong modal, offcanvas, dropdown, b\u1ea3ng d\u1eef li\u1ec7u v\u00e0 Scrollspy.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/","og_locale":"vi_VN","og_type":"article","og_title":"Scrollbar Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf","og_description":"Trong qu\u00e1 tr\u00ecnh thi\u1ebft k\u1ebf giao di\u1ec7n website, c\u00f3 nh\u1eefng l\u00fac n\u1ed9i dung tr\u00ean giao di\u1ec7n c\u1ee7a b\u1ea1n nhi\u1ec1u \u0111\u1ebfn m\u1ee9c tr\u00e0n ra ngo\u00e0i khung \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn th\u1ea9m m\u1ef9. L\u00fac n\u00e0y,","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-11-30T15:23:57+00:00","article_modified_time":"2025-12-02T02:30:31+00:00","og_image":[{"width":800,"height":421,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/scrollbar-bootstrap-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"16 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Scrollbar Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf","datePublished":"2025-11-30T15:23:57+00:00","dateModified":"2025-12-02T02:30:31+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/"},"wordCount":3665,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/scrollbar-bootstrap-scaled.png","articleSection":["Bootstrap","Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/","name":"Scrollbar Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/scrollbar-bootstrap-scaled.png","datePublished":"2025-11-30T15:23:57+00:00","dateModified":"2025-12-02T02:30:31+00:00","description":"T\u00ecm hi\u1ec3u c\u00e1ch \u0111i\u1ec1u khi\u1ec3n scrollbar Bootstrap b\u1eb1ng Overflow Utilities, \u1ee9ng d\u1ee5ng trong modal, offcanvas, dropdown, b\u1ea3ng d\u1eef li\u1ec7u v\u00e0 Scrollspy.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/scrollbar-bootstrap-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/10\/scrollbar-bootstrap-scaled.png","width":800,"height":421,"caption":"Scrollbar Bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-scrollbar-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Scrollbar Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/92123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=92123"}],"version-history":[{"count":5,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/92123\/revisions"}],"predecessor-version":[{"id":93411,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/92123\/revisions\/93411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/93368"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=92123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=92123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=92123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}