Horizontal container scroll on hover

Ask the community
,
1

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

2

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?

1 Like
3

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

4

MAybe you want to try it without code?

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

5

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

6

vt5Sx
vt5Sx864×540 6.12 KB

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

7

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…
<!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…

8

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!

9

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.

10

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?