<!DOCTYPE HTML>
<style>
.scroll {
position: relative;
width: 100px;
height: 100px;
display: inline-block;
border: 10px solid blue;
overflow: scroll;
padding: 5px;
}
.target {
width: 50px;
height: 50px;
outline: solid black 20px;
}
.space {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
</style>
<div class="scroll">
<div class="target"></div>
<div class="space"></div>
</div>
<div class="scroll" style="writing-mode: vertical-rl">
<div class="target"></div>
<div class="space"></div>
</div>
<div class="scroll" style="writing-mode: vertical-lr">
<div class="target"></div>
<div class="space"></div>
</div>
<br>
<div class="scroll" style="direction: rtl">
<div class="target"></div>
<div class="space"></div>
</div>
<div class="scroll" style="direction: rtl; writing-mode: vertical-rl">
<div class="target"></div>
<div class="space"></div>
</div>
<div class="scroll" style="direction: rtl; writing-mode: vertical-lr">
<div class="target"></div>
<div class="space"></div>
</div>