Generate Scroll Bar for Overflow to the Left

Generate scroll bar for overflow to the left

So, using the dir attribute in the right places you can half-do what I wanted. But you can't have your cake and eat it - I wanted to be able to scroll left to see content overflowing left, and also scroll right to see content overflowing right. With or without this dir hack, you still have some unviewable content.

Without dir hack, can't see all of Longtext2

div.a

{

  position: relative;

  float: right;

  background-color: red;

}

div.b

{

  position: absolute;

  top: 100%;

  right: 100%;

  background-color: blue;

}

<html>

  <head>

    <style type="text/css">

    </style>

  </head>

  <body>

    <div>

      Start_Longtext1Longtext1Longtext1Longtext1Longtext1_End

    </div>

    <div class="a">

      Text1

      <div class="b">

        Start_Longtext2Longtext2Longtext2Longtext2Longtext2_End

      </div>

    </div>

  </body>

</html>

Left/Top overflow with scrollbars

Maybe this help... consider that the offset scroll cannot be negative; you can only go from 0 to infinite(I think lol); then, you can move your element through left and top negative values but it does not enable you to scroll to. So, You can augment the width and height based on the user requirement and scroll the same value to the inverse direction of the user move it will show the effect that the scroll able to go these posions that right now is unavailable (negative scrolls). When you go back, you have to reverse the augment and when the augment is null then you move your element as need.

I expect that my explanation was successful; excuse me for my english...

"use strcit";

var blank, container, yblock;

function bLeft() {

  if (yblock.offsetLeft <= 0) {

    blank.style.width = blank.offsetWidth + 16 + 'px';

    container.scrollTo(container.scrollLeft + 16, container.scrollTop);

  } else {

    yblock.style.left = `${yblock.offsetLeft - 16}px`;

  }

}

function bRight() {

  if (blank.offsetWidth > container.offsetWidth) {

    blank.style.width = blank.offsetWidth - 16 + 'px';

  } else {

    yblock.style.left = `${yblock.offsetLeft + 16}px`;

  }

}

function bUp() {

  if (yblock.offsetTop <= 0) {

    blank.style.height = blank.offsetHeight + 16 + 'px';

    container.scrollTo(container.scrollLeft, container.scrollTop + 16);

  } else {

    yblock.style.top = `${yblock.offsetTop - 16}px`;

  }

}

function bDown() {

  if (blank.offsetHeight > container.offsetHeight) {

    blank.style.height = blank.offsetHeight - 16 + 'px';

  } else {

    yblock.style.top = `${yblock.offsetTop + 16}px`;

  }

}

window.addEventListener("load", function() {

  blank = document.getElementById("blank");

  container = document.getElementById("container");

  yblock = document.getElementById("y-block");

  document.getElementById("left").addEventListener("click", bLeft);

  document.getElementById("right").addEventListener("click", bRight);

  document.getElementById("up").addEventListener("click", bUp);

  document.getElementById("down").addEventListener("click", bDown);

});

.container {

  position: relative;

  width: 20em;

  height: 20em;

  border: dashed 0.2em black;

  overflow: auto;

}

.blank {

  position: absolute;

  width: 100%;

  height: 100%;

}

.y-block {

  position: absolute;

  background-color: yellow;

  width: 3em;

  height: 3em;

}

<div class="container" id="container">

  <div class="blank" id="blank">

    <div class="y-block" id="y-block"></div>

  </div>

</div>

<div>

  <input type="button" value="left" id="left">

  <input type="button" value="right" id="right">

  <input type="button" value="down" id="down">

  <input type="button" value="up" id="up">

</div>

Why doesn't the scroll bar appear even if it protrudes to the left?

It's this paragraph from section 3.3. Scrolling Origin, Direction, and Restriction

Due to Web-compatibility constraints (caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output), UAs must clip the scrollable overflow region of scroll containers on the block-start and inline-start sides of the box (thereby behaving as if they had no scrollable overflow on that side).

In other words, the overflow notionally happens on both sides. But it is clipped.

How can I add a scrollbar for side panel when the body overflow is set to hidden?

You need to add a height value to the #sidebar, along with overflow: scroll.

Try:

#sidebar {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    width: 350px;
    overflow: scroll;
    height: 100vh;
}

Pure css way to prevent scrollbar pushing content to the left?

Unfortunately there is no other way to prevent your problem.
Just use

     body {
        overflow:hidden;
     }

As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.

I hope that helps.

How to position a div scrollbar on the left hand side?

  .list_container {
    direction: rtl;
    overflow:auto;
    height: 50px;
    width: 50px;
  }

  .item_direction {
    direction:ltr;
  }

<div class="list_container">
  <div class="item_direction">1</div>
  <div class="item_direction">2</div>
  <div class="item_direction">3</div>
  <div class="item_direction">4</div>
  <div class="item_direction">5</div>
  <div class="item_direction">6</div>
  <div class="item_direction">7</div>
  <div class="item_direction">8</div>
  <div class="item_direction">9</div>
  <div class="item_direction">10</div>
  <div class="item_direction">11</div>
  <div class="item_direction">12</div>
</div>

Generate Scroll Bar for Overflow to the Left