<!DOCTYPE html>
<body>
<div class="main">
<div class="wrapper">
<div class="child"></div>
</div>
</div>
</body>
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
}
.main {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
width: 100vmin;
height: 100vmin;
background: green;
direction: rtl;
}
.main::-webkit-scrollbar {
width: 0.5vmin;
height: 100%;
background-color: grey;
}
.main::-webkit-scrollbar-thumb {
background: blue;
}
.wrapper {
direction: ltr;
}
.child {
margin-left: calc(0.5vmin - (100vmin - 100%));
background: yellow;
width: 10vmin;
height: 100vmin;
}
</style>
</html>