{"id":5536,"date":"2023-12-28T04:48:16","date_gmt":"2023-12-28T04:48:16","guid":{"rendered":"https:\/\/graphica.pe\/modify-scrollbar-style\/"},"modified":"2024-07-11T20:55:37","modified_gmt":"2024-07-11T20:55:37","slug":"modify-scrollbar-style","status":"publish","type":"post","link":"https:\/\/graphica.pe\/en\/modify-scrollbar-style\/","title":{"rendered":"Modify ScrollBar style"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5536\" class=\"elementor elementor-5536 elementor-4596\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc63c86 e-flex e-con-boxed e-con e-parent\" data-id=\"cc63c86\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dba1534 elementor-widget elementor-widget-text-editor\" data-id=\"dba1534\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We change the style of the scroll bar:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08a041c elementor-widget elementor-widget-code-highlight\" data-id=\"08a041c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-twilight copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>:root {\r\n    --scrollbar-width: 10px;\r\n\t--scrollbar-track-color: #000000;\r\n\t--scrollbar-thumb-color: #3b3a3a;\r\n\t--scrollbar-thumb-color-hover: #464646;\r\n\t--scrollbar-thumb-border-radius: 0px;\r\n}\r\n\r\n\/* ***************************************** *\/\r\n\/* SCROLLBAR *\/\r\n\/* ***************************************** *\/\r\nhtml{\r\n\tscroll-behavior: smooth;\r\n}\r\n\/* Estilo del contenedor que contendr\u00e1 el scroll *\/\r\n* { \r\n\tscrollbar-width: var(--scrollbar-width);\r\n}\r\n\/* Estilo de la barra de desplazamiento *\/\r\n*::-webkit-scrollbar { \r\n\twidth: var(--scrollbar-width);\r\n\theight: var(--scrollbar-width);\r\n}\r\n\/* Estilo del riel de la barra de desplazamiento *\/\r\n*::-webkit-scrollbar-track {\r\n\tbackground-color: var(--scrollbar-track-color);\r\n}\r\n\/* Estilo del pulgar de la barra de desplazamiento *\/\r\n*::-webkit-scrollbar-thumb {\r\n\tbackground-color: var(--scrollbar-thumb-color);\r\n\tborder-radius: var(--scrollbar-thumb-border-radius);\r\n}\r\n\/* Estilo del pulgar de la barra de desplazamiento cuando se pasa el rat\u00f3n por encima *\/\r\n*::-webkit-scrollbar-thumb:hover {\r\n\tbackground-color: var(--scrollbar-thumb-color-hover);\r\n}\r\n\r\n\/* ***************************************** *\/\r\n\/* SELECCION *\/\r\n\/* ***************************************** *\/\r\n::-moz-selection { \/* Code for Firefox *\/\r\n\tcolor: #E0CC8F;\r\n\tbackground: var(--e-global-color-primary);\r\n}\r\n::selection {\r\n\tcolor: #E0CC8F;\r\n\tbackground: var(--e-global-color-primary);\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>We change the style of the scroll bar: :root { &#8211;scrollbar-width: 10px; &#8211;scrollbar-track-color: #000000; &#8211;scrollbar-thumb-color: #3b3a3a; &#8211;scrollbar-thumb-color-hover: #464646; &#8211;scrollbar-thumb-border-radius: 0px; } \/* ***************************************** *\/ \/* SCROLLBAR *\/ \/* ***************************************** *\/ html{ scroll-behavior: smooth; } \/* Estilo del contenedor que contendr\u00e1 el scroll *\/ * { scrollbar-width: var(&#8211;scrollbar-width); } \/* Estilo de la barra de desplazamiento [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-5536","post","type-post","status-publish","format-standard","hentry"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/comments?post=5536"}],"version-history":[{"count":0,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5536\/revisions"}],"wp:attachment":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/media?parent=5536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/categories?post=5536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/tags?post=5536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}