how to scroll in both direction left and right horizonatally

Question

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" class="scroll-smooth  w-[700px] h-full flex justify-center items-center py-[40px] w-full px-[3rem] " style="    overflow: scroll;
    direction:rtl; ">
  <div class="flex items-center justify-center gap-x-[2rem]
      gap-x-[20px]" style=" height: 100%;">

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



  </div>
</div>

Plese put your code direct into your question, not as an image, and make it into a runnable snippet - see https://stackoverflow.com/help/minimal-reproducible-example and perhaps try to describe the problem in more detail. I'm not clear what the 'it' is that you want to scroll for example. — A Haworth, Jul 23 '22 at 13:22
yeah you're right this is a link https://codepen.io/mehdibenzzine/pen/mdxwGGV and the problem is that it scroll just from one side which not m looking for — MehDi Benzzine, Jul 23 '22 at 14:07

score 1 · Answer 1 · answered Jul 23 '22 at 12:54

1

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

answered Jul 23 '22 at 12:54

Sandushi Dileka

166
5

score 1 · Answer 2 · answered Jul 24 '22 at 06:51

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" class="scroll-smooth  w-full h-full flex justify-center items-center py-[40px]" style="overflow: hidden;">
  <div class="scroll-to-center flex gap-x-[2rem] px-[3rem]" style="height: 100%; overflow-x: auto">

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

  </div>
</div>

Resize the window then rerun the snippet to test.

how to scroll in both direction left and right horizonatally

2 Answers2