<!DOCTYPE HTML>
<html>
<head>
<style>
.swipeable {
  overflow: scroll;
  height: 200px;
  width: 200px;
}
.left-right-item,
.top-bottom-item {
  height: 100px;
  width: 100px;
}
.left-right-item {
  display: inline-block;
}
.red-bg {
  background-color: red;
}
.blue-bg {
  background-color: blue;
}
.tall-and-wide {
  background-color: grey;
  height: 5000px;
  width: 5000px;
}
</style>
</head>
<body>

<div id="left-right" class="swipeable">
  <div style="width: 1000px;">
    <div class="left-right-item red-bg">Test</div>
    <div class="left-right-item blue-bg">Test</div>
    <div class="left-right-item red-bg">Test</div>
    <div class="left-right-item blue-bg">Test</div>
  </div>
</div>

<div id="top-bottom" class="swipeable">
  <div class="top-bottom-item red-bg">Test</div>
  <div class="top-bottom-item blue-bg">Test</div>
  <div class="top-bottom-item red-bg">Test</div>
  <div class="top-bottom-item blue-bg">Test</div>
</div>

<div class="tall-and-wide"></div>

</body>
</html>