CODEWITHSUNDEEP
htmlcss
Maksym Davydov
Maksym Davydov

Reputation: 142

Can I scroll horizontally overflowed box?

I am stuck with scrolling my overflowed by x box. I will try explain what I mean in the example below:

Example

As you can see in the example I have a box, there is horizontal overflow. Now, for me interesting, does it possible to scroll content of this box on left/right when I am scrolling mouse?

I have tried "over scroll x", but either I did not understand, or it is.

If someone know or have any ideas, feel free to suggest. I am waiting for your answer!

Upvotes: 0

Views: 48

Answers (1)

krishnaacharyaa
krishnaacharyaa

Reputation: 25130

Using Keyboard :

  • For vertical scroll you simply do the mouse scroll šŸ–±
  • For horizontal scroll you need to hold shift key + mouse scroll šŸ–±

Programmatically :

āš  This is highly not recommended because the alignment changes and it can't be properly aligned for dynamic contents, but this can be achieved by rotating the container 90 degrees left and right

<div class="overflow-y-scroll h-[600px] w-[180px] -rotate-90 text-4xl">
  <div class="w-[140px] rotate-90">Hello</div>
  <div class="h-[140px] w-[20px] rotate-90">Hello</div>
  <div class="h-[140px] w-[20px] rotate-90">Hello</div>
  <div class="h-[140px] w-[20px] rotate-90">Hello</div>
  <div class="h-[140px] w-[20px] rotate-90">Hello</div>
  <div class="h-[140px] w-[20px] rotate-90">Hello</div>
  <div class="h-[140px] w-[20px] rotate-90">Hello</div>
  <div class="h-[140px] w-[20px] rotate-90">Hello</div>
</div>

Output:

enter image description here

<div class="overflow-y-scroll w-[180px] rotate-90 text-4xl">
  <div class="m-10 w-[140px] -rotate-90">Hello</div>
  <div class="m-10 w-[140px] -rotate-90">Hello</div>
  <div class="m-10 w-[140px] -rotate-90">Hello</div>
  <div class="m-10 w-[140px] -rotate-90">Hello</div>
  <div class="m-10 w-[140px] -rotate-90">Hello</div>
  <div class="m-10 w-[140px] -rotate-90">Hello</div>
  <div class="mt-60 w-[140px] -rotate-90">Hello</div>
</div>

Output:

enter image description here

Tailwind-play

Upvotes: 1

Related Questions