Display scrollable lists in two areas

by interlife

HTML

<div class="scroll_area" id="js-scroll_drag_area">
  <div class="scrollinner">
   <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul> 
  </div>
</div>

<div class="scroll_area scroll_area-2" id="js-scroll_drag_area-2">
  <div class="scrollinner">
  <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul>
  </div>
</div>

SASS

.scroll_area {
  margin: 2em;
  display: block;
  width: 300px;
  height: 150px;
  position: relative;
  background: yellow;
  color: brown;
  overflow: scroll;
  &.scroll_area-2 {
    background: lime;
  }
}
.scrollinner {
  padding: 2em;
	position:relative;
  width: 1200px;
  height: 1200px;
  box-sizing: border-box;
	&:after {
		position: absolute; bottom: 0;
		content: "end";
	}
}