how to scroll in both direction left and right horizonatally-CodePudding

enter image description here I basically want it to scroll both ways like it is demonstrated above since when I tried to alter the default direction from (lfr) to (rtl), the result was the same but in reverse.

<div id="scroll"  style="    overflow: scroll;
    direction:rtl; ">
  <div  style=" height: 100%;">

    <img  src="https://i.imgur.com/N4sZXKq.png" alt="" srcset="">
    <img  src="https://i.imgur.com/N4sZXKq.png" alt="" srcset="">
    <img  src="https://i.imgur.com/N4sZXKq.png" alt="" srcset="">



  </div>
</div>

CodePudding user response：

As I understood the problem, I think this will be helpful for your problem. Scroll horizontally starting from right to left with CSS overflow:scroll

CodePudding user response：

Note: I think you are asking "how to have the div scrolled to the center initially?", or "how to make the second item visibly centered within the scrolling div on page load?"

What you can do is scroll to the center using JavaScript scrollLeft property (see snippet below). I had to adjust your markup a little bit to get the items aligned correctly within the scrolling div. Also, the scrolling behavior should be set on the immediate parent div of the .items while #scroll itself will have overflow: hidden.

document.addEventListener("DOMContentLoaded", function(event) { // document ready

  document.querySelectorAll('.scroll-to-center').forEach((stc) => {
    // First try to scroll well beyond the possible width
    stc.scrollLeft = 1000000
    // it will be set to the maximum scrollLeft
    //console.log(stc.scrollLeft) 

    // Then set to half it's value
    stc.scrollLeft /= 2
  })

});

<script src="https://cdn.tailwindcss.com"></script>

<div id="scroll"  style="overflow: hidden;">
  <div  style="height: 100%; overflow-x: auto">

    <img  src="https://i.imgur.com/N4sZXKq.png" alt="first" srcset="">
    <img  src="https://i.imgur.com/N4sZXKq.png" alt="second" srcset="">
    <img  src="https://i.imgur.com/N4sZXKq.png" alt="third" srcset="">

  </div>
</div>

Resize the window then rerun the snippet to test.