{"id":4430,"date":"2026-04-13T13:51:06","date_gmt":"2026-04-13T12:51:06","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=4430"},"modified":"2026-04-13T14:17:26","modified_gmt":"2026-04-13T13:17:26","slug":"horizontal-scrolling-without-scroll-bar","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/scrolling\/horizontal-scrolling-without-scroll-bar","title":{"rendered":"Horizontal scrolling without scroll bar"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Using mouse or touch to scroll sideways<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">CSS<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;style>\n    .MyHozScrolledContainer {\n      display: flex;\n      flex-direction: row;\n      gap: 10px;\n      overflow-x: auto;\n      overflow-y: hidden;\n      flex-wrap: nowrap;\n      scroll-behavior: smooth;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width: none;\n      scroll-snap-type: x mandatory;\n      cursor: grab;\n      user-select: none;\n    }\n    .MyHozScrolledContainer::-webkit-scrollbar\n    {\n      display: none;\n    }\n    .MyHozScrolledContainer:active\n    {\n      cursor: grabbing;\n    }\n\n    .MyHozScrolledItem {\n      display: flex;\n      flex-direction: column;\n      width: 180px;\n      white-space: nowrap;\n      overflow: hidden;\n      padding-left: 5px;\n      flex: 0 0 auto;\n      scroll-snap-align: start;\n      scroll-padding-left: 8px; \/*Use this to give a gap to the left edge*\/\n    }\n  &lt;\/style><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">JavaScript<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;script&gt;\n    \/\/ALLOW MOUSE TO HORIZONTALL SCROLL THE DIVS (touch already works, but mouse needs code)\n    document.addEventListener(\"DOMContentLoaded\", function(event) {\n\n      const container = document.querySelector('.MyHozScrolledContainer');\n      let is_down = false;\n      let start_x = 0;\n      let scroll_left = 0;\n\n      container.addEventListener('mousedown', function(Event)\n      {\n        is_down = true;\n        container.classList.add('Active');\n        start_x = Event.pageX - container.offsetLeft;\n        scroll_left = container.scrollLeft;\n      });\n\n      container.addEventListener('mouseleave', function()\n      {\n        is_down = false;\n        container.classList.remove('Active');\n      });\n\n      container.addEventListener('mouseup', function()\n      {\n        is_down = false;\n        container.classList.remove('Active');\n      });\n\n      container.addEventListener('mousemove', function(Event)\n      {\n        if (!is_down)\n          return;\n\n        Event.preventDefault();\n        const x = Event.pageX - container.offsetLeft;\n        const walk = (x - start_x) * 2;\n        container.scrollLeft = scroll_left - walk;\n      });\n    });\n  &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">HTML<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;div class=\"MyHozScrolledContainer\" &gt;\n    &lt;div class=\"MyHozScrolledItem\" &gt;\n\n    &lt;\/div&gt;\n    &lt;div class=\"MyHozScrolledItem\" &gt;\n\n    &lt;\/div&gt;\n    &lt;div class=\"MyHozScrolledItem\" &gt;\n\n    &lt;\/div&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Using mouse or touch to scroll sideways CSS JavaScript HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[345],"tags":[],"class_list":["post-4430","post","type-post","status-publish","format-standard","hentry","category-scrolling"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/4430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=4430"}],"version-history":[{"count":5,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/4430\/revisions"}],"predecessor-version":[{"id":4435,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/4430\/revisions\/4435"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=4430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=4430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=4430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}