Edit in JSFiddle

<div class="column">
  <p>通常のスクロールできるボックス</p>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum enim vel velit bibendum, tempor lobortis elit volutpat. Donec scelerisque nunc elit, ac vulputate nibh convallis tincidunt. Aenean elementum massa vel tortor lacinia, eu placerat felis aliquam. Vivamus finibus leo quis libero sollicitudin luctus. Vestibulum varius euismod augue eget imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent semper, sem at congue varius, est risus dignissim quam, sit amet euismod sapien felis at tellus. Pellentesque nec nulla ac arcu pulvinar bibendum.</p>
  </div>
</div>

<div class="column">
  <p>pointer-events: noneを指定</p>
  <div class="box" style="pointer-events: none">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum enim vel velit bibendum, tempor lobortis elit volutpat. Donec scelerisque nunc elit, ac vulputate nibh convallis tincidunt. Aenean elementum massa vel tortor lacinia, eu placerat felis aliquam. Vivamus finibus leo quis libero sollicitudin luctus. Vestibulum varius euismod augue eget imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent semper, sem at congue varius, est risus dignissim quam, sit amet euismod sapien felis at tellus. Pellentesque nec nulla ac arcu pulvinar bibendum.</p>
  </div>
</div>

<div class="column">
  <p>pointer-events: noneとtabindex="1"を指定</p>
  <div class="box" style="pointer-events: none" tabindex="1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum enim vel velit bibendum, tempor lobortis elit volutpat. Donec scelerisque nunc elit, ac vulputate nibh convallis tincidunt. Aenean elementum massa vel tortor lacinia, eu placerat felis aliquam. Vivamus finibus leo quis libero sollicitudin luctus. Vestibulum varius euismod augue eget imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent semper, sem at congue varius, est risus dignissim quam, sit amet euismod sapien felis at tellus. Pellentesque nec nulla ac arcu pulvinar bibendum.</p>
  </div>
</div>
body {
  display: flex;
  align-items: flex-end;
}

.column {
  margin-left: 10px;
  width: 200px;
}

.box {
  border: 1px solid #000;
  height: 150px;
  overflow: scroll;
}