{"id":113,"date":"2017-05-04T16:41:54","date_gmt":"2017-05-04T14:41:54","guid":{"rendered":"http:\/\/www.kopf.com.br\/kaplof\/?p=113"},"modified":"2017-05-04T16:41:54","modified_gmt":"2017-05-04T14:41:54","slug":"scroll-a-div-horizontally-using-css","status":"publish","type":"post","link":"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/","title":{"rendered":"Scroll a DIV horizontally using CSS"},"content":{"rendered":"

On Today’s mobile world, sometimes is preferable to scroll sections\u00a0horizontally rather than vertically, being\u00a0the most common example a gallery of images. There are tones of libraries that implement\u00a0such solution\u00a0on various fancy ways but they are all javascript based and most them have a heavy footprint and may require tones of others libraries.<\/p>\n

If you need a\u00a0light and\u00a0native solution, the problem can be also solved\u00a0with CSS by using the calc<\/a> function. The calc<\/em> function is not as powerful as writing javascript code but it is supported since some years by all modern browsers.<\/p>\n

Below we illustrate the usage of the calc<\/em> function to ensure that a DIV element has always only the horizontal scrollbar while displaying a collection of child elements. It assumes that the number of children as well as its size is known.<\/p>\n

If you don’t have time for explanations and wants to go to the solution right away, a working example can be found below:<\/p>\n

https:\/\/jsfiddle.net\/bmarotta\/7c7n832o\/<\/a><\/p>\n

The layout<\/h2>\n

To achieve our goal we need:<\/p>\n

    \n
  1. One\u00a0DIV (or any other container) that will frame the space to be used<\/li>\n
  2. One\u00a0DIV\u00a0whose width\u00a0will grow horizontally depending on the contents size and container height<\/li>\n
  3. The content. In our case a bunch of DIVs but it could as well have been images or labels, as long as we could predict its dimension.<\/li>\n<\/ol>\n

    For our example we called the first DIV the outer, the\u00a0second DIV inner. We assume that each child DIV has 150px width and 100px height with 10px margin on all sides.<\/p>\n

    The Formula<\/h2>\n

    As mentioned in the header, to adjust the width we use the CSS calc<\/em> function. Our formula should be:<\/p>\n

      <# of items> \/ (<total height> \/ <item height>) * <item width><\/pre>\n
    Explanation<\/h3>\n
      \n
    1. Find out how many rows fit in the container: available height divided by the individual item height.<\/li>\n
    2. Find out how many items we will have per row by dividing the number of items by the result of point 1.<\/li>\n
    3. Multiply the number of items per row by the item width (considering the margin).<\/li>\n<\/ol>\n
      To get the total height we use the\u00a0value ‘100vh<\/a>‘ meaning 100% of the viewport height. If we assume 20 items our CSS should look something like this:<\/p>\n
        .inner {\r\n    width: calc(20 \/ (100vh \/ 120px) * 180px)\r\n  }<\/pre>\n
      This would be too simple if we didn’t have many setbacks:<\/p>\n
        \n
      1. The calc<\/em> function works with float numbers. To get it right we would have to work with integer numbers or something like a ceil or floor functions<\/li>\n
      2. The calc<\/em> function is very restrictive in terms of units that can be used, order of operators and others things. Setting it right for complex formulas is a tedious trial-and-error work<\/li>\n
      3. If you put space or blank lines between the child DIV items some additional pixels will be added between each one of them and the calculation might be wrong<\/li>\n<\/ol>\n
        To overcome the first problem we simply simulate one item more for each row, or:<\/p>\n
        .inner {\r\n    width: calc(20 \/ ((100vh \/ 120px) + 1) * 180px)\r\n}<\/pre>\n
        The second problem is a little bit trickier. It requires several iterations on the browser style editor and some arithmetic simplifications. During the implementation I found out that the calc<\/em> function doesn’t always allow me to add the px unit. For whatever reason I had to remove the last px and multiply the result by 100.<\/p>\n
        The last point is the easiest one: just remove the blank lines and empty spaces.<\/p>\n
        The end result is:<\/p>\n
        .inner {\r\n  width: calc((20 * 120px \/ (100vh - 120px) * 100) * 180);\r\n}<\/pre>\n
        Last considerations<\/h2>\n
        To workaround the lack of rounding in the calc function we had to add always one item more to\u00a0each row. Although this prevents the vertical scroll to appears (which was our primary goal) it will adjust the width\u00a0linearly and not\u00a0in chunks. For instance, with 1 row one would expect to have 20 items\u00a0per row, 2 rows 10 items and 3 rows 7 items plus 6 items in the last row. The effect from the above formula without rounding is that with 2 rows we might get 10, 11, 12 to 19 items in the first row depending on the viewport height.<\/p>\n
        To minimize this effect we can add media queries for the 3 first cases (1, 2 and 3 rows) where this effect is more visible:<\/p>\n
        @media all and (max-height: 490px) {\r\n\u00a0 .inner {\r\n\u00a0\u00a0\u00a0 width: 1260px; \/* for browsers that don't implement calc *\/\r\n\u00a0\u00a0\u00a0 width: calc(7 * 180px);\r\n\u00a0 }\r\n}<\/pre>\n
        @media all and (max-height: 370px) {\r\n\u00a0 .inner {\r\n\u00a0\u00a0\u00a0 width: 1800px; \/* for browsers that don't implement calc *\/\r\n\u00a0\u00a0\u00a0 width: calc(10 * 180px);\r\n\u00a0 }\r\n}<\/pre>\n
        @media all and (max-height: 250px) {\r\n\u00a0 .inner {\r\n\u00a0\u00a0\u00a0 width: 3600px; \/* for browsers that don't implement calc *\/\r\n\u00a0\u00a0\u00a0 width: calc(20 * 180px);\r\n\u00a0 }\r\n}<\/pre>\n
         <\/p>\n","protected":false},"excerpt":{"rendered":"
        On Today’s mobile world, sometimes is preferable to scroll sections\u00a0horizontally rather than vertically, being\u00a0the most common example a gallery of images. There are tones of libraries that implement\u00a0such solution\u00a0on various fancy ways but they are all javascript based and most them have a heavy footprint and may require tones of others libraries. If you need […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[38,39,37],"yoast_head":"\nScroll a DIV horizontally using CSS - Kaplof<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scroll a DIV horizontally using CSS - Kaplof\" \/>\n<meta property=\"og:description\" content=\"On Today’s mobile world, sometimes is preferable to scroll sections\u00a0horizontally rather than vertically, being\u00a0the most common example a gallery of images. There are tones of libraries that implement\u00a0such solution\u00a0on various fancy ways but they are all javascript based and most them have a heavy footprint and may require tones of others libraries. If you need […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kaplof\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-04T14:41:54+00:00\" \/>\n<meta name=\"author\" content=\"Bruno Marotta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bruno Marotta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/\"},\"author\":{\"name\":\"Bruno Marotta\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/a096a6de30951e12938c6a800eeaa891\"},\"headline\":\"Scroll a DIV horizontally using CSS\",\"datePublished\":\"2017-05-04T14:41:54+00:00\",\"dateModified\":\"2017-05-04T14:41:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/\"},\"wordCount\":681,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#organization\"},\"keywords\":[\"CSS\",\"DIV\",\"HTML\"],\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/\",\"url\":\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/\",\"name\":\"Scroll a DIV horizontally using CSS - Kaplof\",\"isPartOf\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#website\"},\"datePublished\":\"2017-05-04T14:41:54+00:00\",\"dateModified\":\"2017-05-04T14:41:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kopf.com.br\/kaplof\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scroll a DIV horizontally using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#website\",\"url\":\"https:\/\/www.kopf.com.br\/kaplof\/\",\"name\":\"Kaplof\",\"description\":\"Sharing problems and solutions for software development\",\"publisher\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kopf.com.br\/kaplof\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#organization\",\"name\":\"Kopf\",\"url\":\"https:\/\/www.kopf.com.br\/kaplof\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.kopf.com.br\/kaplof\/wp-content\/uploads\/2015\/04\/Logo-grande.png?fit=78%2C76&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.kopf.com.br\/kaplof\/wp-content\/uploads\/2015\/04\/Logo-grande.png?fit=78%2C76&ssl=1\",\"width\":78,\"height\":76,\"caption\":\"Kopf\"},\"image\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/a096a6de30951e12938c6a800eeaa891\",\"name\":\"Bruno Marotta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e15f82b4b9672c32c601286a40eb46f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e15f82b4b9672c32c601286a40eb46f?s=96&d=mm&r=g\",\"caption\":\"Bruno Marotta\"},\"url\":\"https:\/\/www.kopf.com.br\/kaplof\/author\/bmarotta\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scroll a DIV horizontally using CSS - Kaplof","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:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/","og_locale":"en_US","og_type":"article","og_title":"Scroll a DIV horizontally using CSS - Kaplof","og_description":"On Today’s mobile world, sometimes is preferable to scroll sections\u00a0horizontally rather than vertically, being\u00a0the most common example a gallery of images. There are tones of libraries that implement\u00a0such solution\u00a0on various fancy ways but they are all javascript based and most them have a heavy footprint and may require tones of others libraries. If you need […]","og_url":"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/","og_site_name":"Kaplof","article_published_time":"2017-05-04T14:41:54+00:00","author":"Bruno Marotta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Bruno Marotta","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/#article","isPartOf":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/"},"author":{"name":"Bruno Marotta","@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/a096a6de30951e12938c6a800eeaa891"},"headline":"Scroll a DIV horizontally using CSS","datePublished":"2017-05-04T14:41:54+00:00","dateModified":"2017-05-04T14:41:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/"},"wordCount":681,"commentCount":0,"publisher":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/#organization"},"keywords":["CSS","DIV","HTML"],"articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/","url":"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/","name":"Scroll a DIV horizontally using CSS - Kaplof","isPartOf":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/#website"},"datePublished":"2017-05-04T14:41:54+00:00","dateModified":"2017-05-04T14:41:54+00:00","breadcrumb":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kopf.com.br\/kaplof\/scroll-a-div-horizontally-using-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kopf.com.br\/kaplof\/"},{"@type":"ListItem","position":2,"name":"Scroll a DIV horizontally using CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.kopf.com.br\/kaplof\/#website","url":"https:\/\/www.kopf.com.br\/kaplof\/","name":"Kaplof","description":"Sharing problems and solutions for software development","publisher":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kopf.com.br\/kaplof\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.kopf.com.br\/kaplof\/#organization","name":"Kopf","url":"https:\/\/www.kopf.com.br\/kaplof\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.kopf.com.br\/kaplof\/wp-content\/uploads\/2015\/04\/Logo-grande.png?fit=78%2C76&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.kopf.com.br\/kaplof\/wp-content\/uploads\/2015\/04\/Logo-grande.png?fit=78%2C76&ssl=1","width":78,"height":76,"caption":"Kopf"},"image":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/a096a6de30951e12938c6a800eeaa891","name":"Bruno Marotta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e15f82b4b9672c32c601286a40eb46f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e15f82b4b9672c32c601286a40eb46f?s=96&d=mm&r=g","caption":"Bruno Marotta"},"url":"https:\/\/www.kopf.com.br\/kaplof\/author\/bmarotta\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/posts\/113"}],"collection":[{"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":8,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":121,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/posts\/113\/revisions\/121"}],"wp:attachment":[{"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}