{"id":23426,"date":"2024-02-15T11:44:31","date_gmt":"2024-02-15T10:44:31","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/interacciones-scroll-y-overflow-en-css-mejores-practicas-y-ejemplos\/"},"modified":"2024-06-03T17:33:27","modified_gmt":"2024-06-03T16:33:27","slug":"interacciones-scroll-y-overflow-en-css-mejores-practicas-y-ejemplos","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/","title":{"rendered":"Scroll and Overflow Interactions in CSS: Best Practices and Examples"},"content":{"rendered":"<p>In the development of modern web pages, it is important to take into account scroll and overflow interactions to improve the user experience and achieve more attractive designs. In this article, we will explore best practices and examples for using these CSS properties effectively. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/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: #ffffff;color:#ffffff\" 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: #ffffff;color:#ffffff\" 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:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#%C2%BFQue_es_el_scroll_en_CSS\" >What is scroll in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#%C2%BFComo_utilizar_el_desbordamiento_o_overflow_en_CSS\" >How to use overflow in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#Creando_scroll_personalizado_con_CSS\" >Creating custom scroll with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#Scroll_horizontal_con_CSS\" >Horizontal scroll with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#Ejemplos_de_interacciones_scroll_y_overflow_en_CSS\" >Examples of scroll and overflow interactions in CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#Ejemplo_1_Scroll_fijo_en_un_contenedor\" >Example 1: Fixed Scroll in a Container<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#Ejemplo_2_Scroll_suave_al_hacer_clic_en_un_enlace_interno\" >Example 2: Smooth scroll when clicking on an internal link<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#%C2%BFComo_puedo_ocultar_el_desbordamiento_en_CSS\" >How can I hide overflow in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#%C2%BFComo_puedo_crear_un_scroll_horizontal_en_CSS\" >How can I create a horizontal scroll in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#%C2%BFComo_puedo_personalizar_las_barras_de_desplazamiento_en_CSS\" >How can I customize scroll bars in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/scroll-and-overflow-interactions-in-css-best-practices-and-examples\/#%C2%BFEs_posible_lograr_un_desplazamiento_suave_en_enlaces_internos_en_CSS\" >Is it possible to achieve smooth scrolling on internal links in CSS?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_scroll_en_CSS\"><\/span>What is scroll in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Scroll is a CSS property that allows you to control the vertical or horizontal scrolling of an element. This is especially useful when the content of an element exceeds its given size, causing overflow. <\/p>\n<p>The scroll property in CSS is used to control how overflow content is displayed within an element and provides options such as auto scroll, hidden scroll, and visible scroll. <\/p>\n<p>Scrolling can be applied to elements such as text boxes, image containers, or any other type of content that requires scrolling within a given space.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFComo_utilizar_el_desbordamiento_o_overflow_en_CSS\"><\/span>How to use overflow in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When the content of an element exceeds its set size, overflow occurs. In CSS, we have different values for the overflow property that we can use.<\/p>\n<p>The &quot;visible&quot; value is the default value and allows overflowing content to be displayed outside the element. This can lead to a messy and unaesthetic design.<\/p>\n<p>The &quot;hidden&quot; value hides the overflowed content, simply trimming the excess. This can be useful when you do not want to display additional content.<\/p>\n<p>The &quot;scroll&quot; value adds both horizontal and vertical scroll bars, allowing the user to scroll through overflowing content. Scroll bars will always be present, even if the content does not exceed the size of the element.<\/p>\n<p>The value &quot;auto&quot; shows scroll bars only when necessary. If the content does not exceed the size of the element, no scroll bars will be displayed.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creando_scroll_personalizado_con_CSS\"><\/span>Creating custom scroll with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Instead of using traditional browser scroll bars, we can use CSS to create custom bars that fit our design. To do this, we need to use the &quot;scrollbar-width&quot; and &quot;scrollbar-color&quot; properties.<\/p>\n<pre>\nbody { scrollbar-width: thin; scrollbar-color: #333333 #eaeaea; }\n<\/pre>\n<p>In the example above, we are changing the thickness of the scroll bars to &quot;thin&quot; and setting the bar color to &quot;#333333&quot; and the background color to &quot;#eaeaea&quot;.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Scroll_horizontal_con_CSS\"><\/span>Horizontal scroll with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>By default, the scroll in CSS is vertical. However, we can also use horizontal scrolling using the &quot;overflow-x&quot; property. For example:<\/p>\n<pre>\n.container { overflow-x: scroll; }\n<\/pre>\n<p>In this case, we have applied the &quot;overflow-x&quot; property to the element with the &quot;container&quot; class to allow horizontal scrolling of content that overflows its set size.<\/p>\n<p>We can also use the &quot;white-space&quot; property with the value &quot;nowrap&quot; to make the content overflow horizontally on a single line.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplos_de_interacciones_scroll_y_overflow_en_CSS\"><\/span>Examples of scroll and overflow interactions in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let&#039;s look at some practical examples of how to use scroll and overflow interactions in CSS:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplo_1_Scroll_fijo_en_un_contenedor\"><\/span>Example 1: Fixed Scroll in a Container<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre>\n.container { height: 300px; overflow: scroll; }\n<\/pre>\n<p>In this example, we have set a fixed height for the container and allow vertical scrolling of content that overflows that size. The scroll bars will always be present.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplo_2_Scroll_suave_al_hacer_clic_en_un_enlace_interno\"><\/span>Example 2: Smooth scroll when clicking on an internal link<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre>\nhtml { scroll-behavior: smooth; }\n<\/pre>\n<p>With the &quot;scroll-behavior&quot; property set to &quot;smooth&quot;, we can achieve smooth scrolling when clicking an internal link pointing to a page element. This improves the user experience when browsing a page with a lot of content.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_ocultar_el_desbordamiento_en_CSS\"><\/span>How can I hide overflow in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To hide overflow content in CSS, you can use the &quot;overflow&quot; property with the value &quot;hidden&quot;. This will clip the content and not show any scroll bar.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_crear_un_scroll_horizontal_en_CSS\"><\/span>How can I create a horizontal scroll in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To create a horizontal scroll in CSS, you can use the &quot;overflow-x&quot; property and set it to &quot;scroll&quot;. This will allow horizontal scrolling of content that overflows its set size.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_personalizar_las_barras_de_desplazamiento_en_CSS\"><\/span>How can I customize scroll bars in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can customize scrollbars in CSS using the &quot;scrollbar-width&quot; and &quot;scrollbar-color&quot; properties. With these properties, you can change the thickness of the bars and set custom colors for the bar and background.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_posible_lograr_un_desplazamiento_suave_en_enlaces_internos_en_CSS\"><\/span>Is it possible to achieve smooth scrolling on internal links in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, you can achieve smooth scrolling on internal links in CSS by using the &quot;scroll-behavior&quot; property and setting it to &quot;smooth&quot;. This will provide a smooth effect when scrolling through internal links on a page.<\/p>\n<p>In conclusion, scroll and overflow interactions in CSS are powerful tools to control and improve the presentation of content on a web page. With the best practices and examples mentioned in this article, you will be able to use these properties effectively and create attractive and functional designs for your web projects. Remember to experiment and customize the scroll bars to fit your design and provide a unique user experience.<br \/>\nIf you want to learn more about web development and UX design, visit <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>. If you have any questions or are interested in collaborating with us, do not hesitate to contact us through our <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">Contact Form<\/a>. And if you want to see examples of our previous work, visit our <a href=\"https:\/\/nelkodev.com\/en\/portfolio\/\">briefcase<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>En el desarrollo de p\u00e1ginas web modernas, es importante tener en cuenta las interacciones scroll y overflow para mejorar la experiencia del usuario y lograr dise\u00f1os m\u00e1s atractivos. En este art\u00edculo, exploraremos las mejores pr\u00e1cticas y ejemplos para utilizar estas propiedades del CSS de manera efectiva. \u00bfQu\u00e9 es el scroll en CSS? El scroll es [&hellip;]<\/p>","protected":false},"author":1,"featured_media":23427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1121],"tags":[205,519,977,912,110,537,168,1005],"class_list":["post-23426","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css","tag-blog","tag-css","tag-ejemplos","tag-interacciones","tag-mejores","tag-overflow","tag-practicas","tag-scroll"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23426"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23426\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23427"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}