Horje
How to Scroll Horizontal Containers Mobile & Desktop

A useful codes to show up your content.

See the example.

Full Code

See the Example.
index.html
Example: HTML 
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  /* Webkit */
  width: 0;
  height: 0;
}

.hs {
  display: flex;
  overflow-x: scroll;
  justify-content: space-between;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  -webkit-overflow-scrolling: touch;
  margin: 0 -20px;
}
.hs__header {
  display: flex;
  align-items: center;
  width: 100%;
}
.hs__headline {
  flex: 1;
}
.hs__arrows {
  align-self: center;
}
.hs__arrows .arrow:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  content: "";
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
  background-size: contain;
  filter: brightness(5);
  width: 18px;
  height: 12px;
  cursor: pointer;
}
.hs__arrows .arrow.disabled:before {
  filter: brightness(2);
}
.hs__arrows .arrow.arrow-prev:before {
  transform: rotate(90deg);
  margin-right: 10px;
}
.hs__arrows .arrow.arrow-next:before {
  transform: rotate(-90deg);
}
.hs__item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(25% - 10px * 2 - 5px);
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.hs__item:last-child:after {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 1px;
  right: calc(10px * 2 * -1);
}
.hs__item:first-child {
  margin-left: calc(10px * 2);
}
.hs__item__description {
  z-index: 1;
  align-self: flex-start;
  margin: 10px 0;
}
.hs__item__subtitle {
  color: #aaa;
  display: block;
}
.hs__item__image__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
.hs__item__image {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (hover: none) and (pointer: coarse) {
  .hs__wrapper .hs__arrows {
    display: none;
  }
  .hs__wrapper .hs__item {
    flex: 1 0 calc(23% - 10px * 2);
  }
}
@media only screen and (hover: none) and (pointer: coarse) and (max-width: 990px) {
  .hs__wrapper .hs__item {
    flex: 1 0 calc(45% - 10px * 2);
  }
}

/* Base Styling */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Muli", sans-serif;
  color: white;
  background: white;
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.container {
  max-width: 990px;
  padding: calc(10px * 2);
  margin: 0 auto;
  background: #121212;
  mix-blend-mode: invert;
  position: relative;
}
.container:after {
  content: "";
  width: 100vw;
  height: 100%;
  background: #212121;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: -1;
}
@media only screen and (min-width: 990px) {
  .container {
    padding: calc(10px * 4) calc(10px * 8);
  }
}

.description {
  max-width: 990px;
  color: #212121;
  margin: 0 auto;
  padding: calc(10px * 4);
}

ul {
  padding: 0;
  margin: 0;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
</head>

<body translate="no">
  <div class="container">
  <div class="hs__wrapper">
    <div class="hs__header">
      <h2 class="hs__headline">Headline 1
      </h2>
      <div class="hs__arrows"><a class="arrow disabled arrow-prev"></a><a class="arrow arrow-next"></a></div>
    </div>
    <ul class="hs">
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig12" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 1</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig22" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 2</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig32" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 3</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig42" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 4</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig52" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 5</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig62" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 6</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig72" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 7</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig82" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 8</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig92" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 9</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig102" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 10</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig112" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 11</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig122" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 12</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig132" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 13</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig142" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 14</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig152" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 15</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig162" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 16</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig172" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 17</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig182" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 18</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig192" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 19</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig202" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 20</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
    </ul>
  </div>




  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
      <script id="rendered-js" >
// work in progress - needs some refactoring and will drop JQuery i promise :)
var instance = $(".hs__wrapper"),x;
$.each(instance, function (key, value) {

  var arrows = $(instance[key]).find(".arrow"),
  box = $(instance[key]).find(".hs"),x,
  mx = 0,
  maxScrollWidth = box[0].scrollWidth - box[0].clientWidth / 2 - 10;

  $(arrows).on('click', function () {

    if ($(this).hasClass("arrow-next")) {
      x = box.width() / 2 + box.scrollLeft() - 10;
      box.animate({
        scrollLeft: x });

      if (x < maxScrollWidth - box.width() / 2) {
        $(this).prev().removeClass('disabled');
      } else {
        $(this).addClass('disabled');
      }
    } else {
      x = box.width() / 2 - box.scrollLeft() - 10;
      box.animate({
        scrollLeft: -x });

      if (x > -10) {
        $(this).addClass('disabled');
      } else {
        $(this).next().removeClass('disabled');
      }
    }

  });

  $(box).on({
    mousemove: function (e) {
      var mx2 = e.pageX - this.offsetLeft;
      if (mx) this.scrollLeft = this.sx + mx - mx2;
    },
    mousedown: function (e) {
      this.sx = this.scrollLeft;
      mx = e.pageX - this.offsetLeft;
    } });


  $(document).on("mouseup", function () {
    mx = 0;
  });

});
//# sourceURL=pen.js
    </script>

  
</body>
</html>

Output should be:



html scroll

Related Articles
How to create HTML Right Left Auto Scroll Turnning HTML Scroll Tutorial
How to Scroll Horizontal Containers Mobile & Desktop HTML Scroll Tutorial


Read Full:
 HTML Scroll Tutorial
Type:
 Develop
Category:
 Web Tutorial
Sub Category:
 HTML Scroll Tutorial
Uploaded:
 6 months ago
Uploaded by:
 Admin
Views:
 250

Reffered: https://codepen.io/marxvn/pen/pBBdWm

Share on:

 

Horje © 2011 to 2025