scroll horizontal css code example

Example 1: hide horizontal scrollbar css

.x-scroll-disabled {
	overflow-x: hidden;
}

Example 2: smooth scroll css

html {
  scroll-behavior: smooth;
}

/* No support in IE, or Safari
You can use this JS polyfill for those */
http://iamdustan.com/smoothscroll/

Example 3: tablayout horizontal scroll

In Java:
tabLayout.setTabMode(MODE_SCROLLABLE) // Default is MODE_FIXED

In XML:
app:tabMode="scrollable"

Example 4: horizontal scroll html

<div class="scrolling-wrapper">
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
</div>
.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

  .card {
    display: inline-block;
  }
}

Example 5: css horizontal scroll

.scroll{
	overflow-x: scroll;
	overflow-y: hidden;
	height: 80px;
  	white-space:nowrap
}

Example 6: how to make div scrollable horizontal

overflow-x: auto(show when needed) or hidden(never) or scroll(always scroll);

Tags:

Css Example