Scrolling Div

This is an absolute positioned div element that has scrolling content via overflow: auto.

by Shaun Ellis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <div class="content">
    <div class="img_gallery" id="sortable">
      <div id="0" class="thumbnail">
        <img class="thumb" src="http://via.placeholder.com/150x200">
        <div class="caption">1</div>
      </div>
      <div id="1" class="thumbnail" style="">
        <img class="thumb" src="http://via.placeholder.com/150x200">
        <div class="caption">2</div>
      </div>
      <div id="2" class="thumbnail">
        <img class="thumb" src="http://via.placeholder.com/150x200">
        <div class="caption">3</div>
      </div>
      <div id="3" class="thumbnail">
        <img class="thumb" src="http://via.placeholder.com/150x200">
        <div class="caption">4</div>
      </div>
      <div id="4" class="thumbnail selected" style="">
        <img class="thumb" src="http://via.placeholder.com/150x200">
        <div class="caption">5</div>
      </div>
      <div id="5" class="thumbnail">
        <img class="thumb" src="http://via.placeholder.com/150x200">
        <div class="caption">6</div>
      </div>
    </div>
  </div>

CSS

.content {
  position: absolute;
  top: 20px;
  left: 0;
  height: 70%;
  width: 60%;
  border-radius: 4px;
}

.img_gallery {
  overflow: auto;
  height: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 30px;
}

.thumbnail {
  display: inline-block;
  max-width: 150px;
  margin: 10px;
}

.caption {
  pointer-events: none;
}

.thumb {
  pointer-events: none;
}