How to Change Scroll Bar Position with CSS

How to change scroll bar position with CSS?

Using CSS only:

Right/Left Flippiing: Working Fiddle

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

Top/Bottom Flipping: Working Fiddle

.Container
{
    width: 200px;
    overflow-y: auto;
}
.Content
{
    width: 300px;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

How to change scrollbar position from bottom to top of the element?

Ok, I've come up with this. Modify it to your needs, but this is all you need, you only need CSS, no JS. THIS DOES NOT CHANGE THE SCROLLBAR, it flips it to be at the top, instead of the bottom. If you want to change the scrollbar, then you will need a plugin (JS plugin).

<html>
    <head>
        <title></title>
        <style>
            .Container
            {
                width: 200px;
                overflow-y: auto;
            }

            .Content { width: 300px; }

            .Container, .Content
            {
                transform:rotateX(180deg);
                -moz-transform:rotateX(180deg); /* Mozilla */
                -webkit-transform:rotateX(180deg); /* Safari and Chrome */
                -ms-transform:rotateX(180deg); /* IE 9+ */
                -o-transform:rotateX(180deg); /* Opera */
            }
        </style>
    </head>
    <body>
        <div class="Container">
            <div class="Content">
                Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
            </div>
        </div>
    </body>
</html>

Adjust scrollbar button position through CSS only

The position of the scrollbars for the viewport is a matter for the browser, and can't be controlled with HTML/CSS.

Your best bet would be to add a thick border around the box of same background color as that of the box, and reducing width/height accordingly.

Or even hide scrollbar-button like:

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

jsfiddle here: http://jsfiddle.net/4nuoo8vg/

A way to change default scrollbar position? CSS Grid

You can do it using display: flex and flex-direction: column-reverse :

#interface {
    display: grid;
    grid-template-columns: 70% 20% 10%;
    grid-template-rows: 5vh minmax(0, 70vh) 15vh;
    height: 100vh;
    overflow: hidden;
}

#passages {
    grid-column: 2;
    grid-row: 2;
    overflow:scroll;
    align-content: end;
    display: flex;
    flex-direction: column-reverse;
}

<div id="interface">
<div id="passages">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Change scrollbar position as fixed

You give wrapper1 class position: fixed property and your problem will be solved

Move relative object position when scrollbar appears using CSS

You can wrap your terminal and move your close button inside. I created a minimal example starting from your code.

EDIT

With the first answer the close button scrolled along with the text, I corrected using the position: sticky; and top:0px;

It is not compatible with all browsers, but with most, you can check compatibility here.

const terminal = document.getElementById("terminal");

addText = () => {
  terminal.innerHTML += "overflowing line<br>";
}

#container-terminal {
  position: relative;
  overflow-y: auto;
  border: 2px solid;
  height: 100px;
  width: 200px;
}

#terminal {
  position: absolute;
  height: 100%;
  width: 100%;
}

#closeBtn {
  background-color: red;
  position: -webkit-sticky;
  position: sticky;
  top:0px;
  width: 20px;
  display: inline-block;
  float: right;
}

<div onclick="addText()" style="cursor:pointer;">Click to add text</div><br>

<div id="container-terminal">
  <div id="terminal">CSS only<br>CSS only<br>CSS only<br>CSS only<br>CSS only<br></div>
  <div id="closeBtn">X</div>
</div>

Change scrollbar height

It is possible.
The first thing you need to know is the structure of a scroll bar. Here I reference a picture from css-tricks.

Sample Image

to achieve what you want, you need:

change where 5(scrollbar thumb) start to scroll and stop scrolling
fake a scroll track instead of 3.

.page {   position: relative;  width: 100px;   height: 200px;}
.content {   width: 100%;}
.wrapper {  position: relative;  width: 100%;   height: 100%;   padding: 0;   overflow-y: scroll;   overflow-x: hidden;   border: 1px solid #ddd;}
.page::after {   content:'';  position: absolute;  z-index: -1;  height: calc(100% - 20px);  top: 10px;  right: -1px;  width: 5px;  background: #666;}
.wrapper::-webkit-scrollbar {    display: block;    width: 5px;}.wrapper::-webkit-scrollbar-track {    background: transparent;}    .wrapper::-webkit-scrollbar-thumb {    background-color: red;    border-right: none;    border-left: none;}
.wrapper::-webkit-scrollbar-track-piece:end {    background: transparent;    margin-bottom: 10px; }
.wrapper::-webkit-scrollbar-track-piece:start {    background: transparent;    margin-top: 10px;}

<div class="page"><div class="wrapper"><div class="content">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/></div></div></div>

How to move a scrollbar together with the left position of its div (possibly with React)

After pursuing this quest for another couple of days, I haven't been able to find examples of React hooks that are able to detect/manage the scroll of individual components in page, let alone horizontal scroll.

I have solved my problem by leaving CSS aside and putting in place a JS/DOM-based solution, catering to the Element methods that control scroll.

These React solutions are all based on using a useRef hook tied to the page Element that is to be controlled, and accessing its methods through the current property of the reference.

The main drawback of these solutions is that (regardless of what the standards seem to promise) I cannot exploit CSS easing functions to implement a smooth scroll transition: for that I was forced to use a setInterval/setTimeout solution to perform many partial scrolls of my component.

How to Change Scroll Bar Position with CSS