# Horizontal container scroll on hover

**URL:** <https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973>\
**Category:** Ask the community\
**Tags:** wix-studio, code\
**Created:** [July 18, 2024, 9:09am UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973 "2024-07-18T09:09:15Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christien\_Michaels](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/christien_michaels/32/82672_2.png) [@Christien\_Michaels](https://forum.wixstudio.com/u/Christien_Michaels)\
**Post date:** [July 18, 2024, 9:09am UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/1 "2024-07-18T09:09:15Z")

</div>

Wix Studio

I have a container made up of smaller containers with illustrations in that overflow off of the page. Is it possible to add a feature that scrolls horizontally through the illustrations when the user hovers over with the mouse?

Many thanks in advance

---

<div class="post-metadata">

**Author:** ![simen](https://avatars.discourse-cdn.com/v4/letter/s/7cd45c/32.png) [@simen](https://forum.wixstudio.com/u/simen)\
**Post date:** [July 18, 2024, 9:50am UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/2 "2024-07-18T09:50:01Z")

</div>

Making them move using Velo is not that hard, but the problem is calculating when it’s over, and if you want to make it start over when you’ve reached the end.

Is there a a set width to the illustrations?

---

<div class="post-metadata">

**Author:** ![Christien\_Michaels](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/christien_michaels/32/82672_2.png) [@Christien\_Michaels](https://forum.wixstudio.com/u/Christien_Michaels)\
**Post date:** [July 18, 2024, 10:08am UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/3 "2024-07-18T10:08:10Z")

</div>

Thanks for getting back to me, the illustrations themselves are various sizes, but the width of the container is 4349px (on 2440 size screen)

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [July 18, 2024, 10:41am UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/4 "2024-07-18T10:41:51Z")

</div>

MAybe you want to try it without code?

[![](https://us1.discourse-cdn.com/wix/original/3X/e/9/e95d74d6d2383de92d7325e9abd67ac1a13b5fc0.jpeg "How to create Horizontal Scroll Animation in Wix Studio in 5 minutes (Scrolling Effect)") ](https://www.youtube.com/watch?v=L5MClMtws8A)

But when i look how time-consuming it is to create a HORIZONTAL-SCROLL-FUNCTION, maybe a VELO-BASED-SOLUTION would be better.

---

<div class="post-metadata">

**Author:** ![Christien\_Michaels](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/christien_michaels/32/82672_2.png) [@Christien\_Michaels](https://forum.wixstudio.com/u/Christien_Michaels)\
**Post date:** [July 19, 2024, 1:37pm UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/5 "2024-07-19T13:37:59Z")

</div>

Thanks russian-dima, but that’s not what I’m after. Specifically I need the container to scroll on hover with the mouse. Appreciate your help anyway

---

<div class="post-metadata">

**Author:** ![Christien\_Michaels](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/christien_michaels/32/82672_2.png) [@Christien\_Michaels](https://forum.wixstudio.com/u/Christien_Michaels)\
**Post date:** [July 19, 2024, 2:28pm UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/6 "2024-07-19T14:28:13Z")

</div>

![vt5Sx](https://us1.discourse-cdn.com/wix/original/3X/b/7/b7341fb82114fb40e5fbb12e87f78542ce175849.png)

Here’s a diagram to help better explain what I need

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [July 19, 2024, 4:19pm UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/7 "2024-07-19T16:19:48Z")

</div>

Here another option, which can work in all of Wix-Editors.  
This is just a simple example → you can expand it, as much as you want.

1. Add an HTML-Component onto your page (set it’s properties/settings).
2. Add the following code into your HTML-Component…

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Scroll on Vertical Mouse Scroll</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .gallery {
      display: flex;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      cursor: grab;
    }

    .gallery img {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="gallery">
    <img src="https://img.freepik.com/free-photo/funny-monkey-with-glasses-studio_23-2150844104.jpg" alt="Image 1">
    <img src="https://wallpapers.com/images/featured/funny-pictures-dzujtlgoq3utq7j4.jpg" alt="Image 2">
    <img src="https://static.vecteezy.com/system/resources/thumbnails/031/693/879/small_2x/portrait-of-a-funny-pig-wearing-a-hat-and-sunglasses-on-a-black-background-ai-generative-photo.jpg" alt="Image 3">
    <img src="https://via.placeholder.com/600x300" alt="Image 4">
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const gallery = document.querySelector('.gallery');

      let isScrolling;
      
      gallery.addEventListener('wheel', (e) => {
        clearTimeout(isScrolling);
        
        isScrolling = setTimeout(() => {
          if (e.deltaY !== 0) {
            // e.deltaY > 0 => scrolling down
            // e.deltaY < 0 => scrolling up
            gallery.scrollLeft += e.deltaY;
          }
        }, 6); // debouncing
      });
    });
  </script>
</body>
</html>

```

1. Save the CODE.
2. Publish website.
3. Continue modifying and integrating this element into the flow and design of your website.

Running example…

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/46woyds0/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![Christien\_Michaels](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/christien_michaels/32/82672_2.png) [@Christien\_Michaels](https://forum.wixstudio.com/u/Christien_Michaels)\
**Post date:** [July 20, 2024, 10:40am UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/8 "2024-07-20T10:40:49Z")

</div>

Many thanks again russian-dima but this isn’t what I’m after. Apologies my image wasn’t that clear. What I need to happen is when the user hovers their cursor over the sides of the containers the container itself scrolls horizontally through it’s content. It needs to be the act of the cursor hovering that triggers the horizontal scroll not the user using their trackpad. I hope that’s clearer!

---

<div class="post-metadata">

**Author:** ![Faruk](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/faruk/32/84339_2.png) [@Faruk](https://forum.wixstudio.com/u/Faruk)\
**Post date:** [July 23, 2024, 12:12pm UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/9 "2024-07-23T12:12:25Z")

</div>

It is not possible to automatically increase the scroll pixels of a specific element (like a box) in Velo. If you ask Wix, there are definitely security vulnerabilities etc. They give a ridiculous answer like this: By the way, do not make HTML suggestions anymore. The html editor in Wix is ​​bad and designing is a complete waste of time.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [July 28, 2024, 10:50pm UTC](https://forum.wixstudio.com/t/horizontal-container-scroll-on-hover/60973/10 "2024-07-28T22:50:00Z")

</div>

Depends on how good you are to use it.

> By the way, do not make HTML suggestions anymore. The html editor in Wix is ​​bad and designing is a complete waste of time.

You want to give some more detail on this?