Seamless side-to-side navigation

Question

Seamless side-to-side navigation

Currently, I am working on a website that has horizontal overflow instead of the common vertical scroll. While everything seems to be functioning properly, I need to enhance the user experience by adjusting the amount scrolled to move larger sections of the screen at a time. However, the issue I am facing is that the code I am using does not provide a smooth transition; the movement appears quite clumsy.

The following is the code snippet I am utilizing, which runs during the mousewheel event:

function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.documentElement.scrollLeft -= (delta*60); // Multiplied by 60
    document.body.scrollLeft -= (delta*60); // Multiplied by 60
    e.preventDefault();
}

As you can observe, I must adjust the delta * 60 to scroll an adequate amount.

I am interested in finding out if it is feasible to create a seamless transition rather than abruptly moving the user across a fixed pixel amount each time.

I have attempted using

scrollBy({ left: <amount>, behavior: 'smooth' });

, but it does not seem to offer a satisfactory user experience as it slightly eases the movement and feels laggy and inconsistent.

My goal is for the user to smoothly animate to the desired amount. Does anyone know if this is achievable?

This feature is implemented within a Vue 3 application, so I would appreciate any insights on how Vue handles this. Nonetheless, I am open to using vanilla JavaScript as well.

Thank you

javascript vue.js vuejs3

Answer 1

Answer №1

In this unique approach, we are experimenting with canceling the scroll event and creating our own physics simulation using animations. By removing the scrollbars, we can avoid any unexpected behavior that may occur when scrolling with the scrollbar in this particular scenario.

let offsetX = 0
let speedX = 0
const deltaMultiplier = 10
const maxSpeed = 160
const friction = 0.85

function scrollHorizontally(ev) {
  ev.preventDefault()
  const delta = -1 * Math.sign(ev.wheelDelta)
  speedX += delta * deltaMultiplier
  speedX = speedX > 0 ? Math.min(speedX, maxSpeed) : Math.max(speedX, -maxSpeed)
  return false;
}

function draw() {
  offsetX += speedX

  const element = document.documentElement
  const maxScrollLeft = element.scrollWidth - element.clientWidth
  offsetX = Math.min(offsetX, maxScrollLeft)
  offsetX = Math.max(offsetX, 0)

  element.scrollLeft = offsetX
  speedX *= friction

  // approximately 60 times per second
  requestAnimationFrame(draw)
}

// must be passive so it can be canceled
addEventListener('mousewheel', scrollHorizontally, {
  passive: false
})


draw()

.div {
  width: 2500px;
  height: 100px;
  background: linear-gradient(0.25turn, green, blue);
  white-space: nobreak;
}

body {
  overflow: hidden;
}

<div class="div">
  <h1>mouse wheel me</h1>
  function scrollHorizontally(e) { e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); console.log(delta) document.documentElement.scrollLeft -= (delta * 60); // Multiplied by 60 document.body.scrollLeft -= (delta
  * 60); // Multiplied by 60 e.preventDefault(); } addEventListener('mousewheel', scrollHorizontally)
</div>

Answer 2

In this unique approach, we are experimenting with canceling the scroll event and creating our own physics simulation using animations. By removing the scrollbars, we can avoid any unexpected behavior that may occur when scrolling with the scrollbar in this particular scenario.

let offsetX = 0
let speedX = 0
const deltaMultiplier = 10
const maxSpeed = 160
const friction = 0.85

function scrollHorizontally(ev) {
  ev.preventDefault()
  const delta = -1 * Math.sign(ev.wheelDelta)
  speedX += delta * deltaMultiplier
  speedX = speedX > 0 ? Math.min(speedX, maxSpeed) : Math.max(speedX, -maxSpeed)
  return false;
}

function draw() {
  offsetX += speedX

  const element = document.documentElement
  const maxScrollLeft = element.scrollWidth - element.clientWidth
  offsetX = Math.min(offsetX, maxScrollLeft)
  offsetX = Math.max(offsetX, 0)

  element.scrollLeft = offsetX
  speedX *= friction

  // approximately 60 times per second
  requestAnimationFrame(draw)
}

// must be passive so it can be canceled
addEventListener('mousewheel', scrollHorizontally, {
  passive: false
})


draw()

.div {
  width: 2500px;
  height: 100px;
  background: linear-gradient(0.25turn, green, blue);
  white-space: nobreak;
}

body {
  overflow: hidden;
}

<div class="div">
  <h1>mouse wheel me</h1>
  function scrollHorizontally(e) { e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); console.log(delta) document.documentElement.scrollLeft -= (delta * 60); // Multiplied by 60 document.body.scrollLeft -= (delta
  * 60); // Multiplied by 60 e.preventDefault(); } addEventListener('mousewheel', scrollHorizontally)
</div>

Answer 3

Answer №2

Here's a method you can try:

<template>
 <div v-scrollHorizontally="scrollHorizontally"></div>
</template>
<script>
export default {
 method: {
  scrollHorizontally(e) {
   e = window.event || e;
   var delta = Math.max(-1, Math.min(1, (e.wheelDelta || - e.detail)));
   var scrollAmount = delta * 60;
   window.scrollBy({ left: scrollAmount, behavior: 'smooth'});
   e.preventDefault();
  }
 }
}
</script>

Answer 4

Here's a method you can try:

<template>
 <div v-scrollHorizontally="scrollHorizontally"></div>
</template>
<script>
export default {
 method: {
  scrollHorizontally(e) {
   e = window.event || e;
   var delta = Math.max(-1, Math.min(1, (e.wheelDelta || - e.detail)));
   var scrollAmount = delta * 60;
   window.scrollBy({ left: scrollAmount, behavior: 'smooth'});
   e.preventDefault();
  }
 }
}
</script>

Seamless side-to-side navigation

Answer №1

Answer №2

Similar questions

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Having trouble uploading several files with Multer functionality?

Get your hands on large files with ease by utilizing jQuery or exploring alternative methods

The appearance of the webkit-scrollbar is not reflecting the intended style

The waypoints.js snippet seems to be malfunctioning in this specific context

Azure experiencing issue with MUI Datepicker where selected date is shifted by one day

React Server Component Warning: Server Functions cannot be invoked during the initial rendering stage

Is it necessary to test the main.js file in Vue.js project?

What is the best way to send checkbox values to ActionResult in MVC5?

Retrieve the link's "href" attribute and its text if they match the specified text

How to create a self-contained div in VueJS using Tailwind CSS without affecting other elements

Experiencing an excessive amount of re-renders

Having trouble accessing and setting the values of a JSON array retrieved using $.get method in JavaScript outside of the function

Using jQuery to append content with a variable as the source

How can I set a background image to automatically adjust to the width of the window, be full height, allow for vertical scrolling, and

"Combining Array Elements in jQuery: A Guide to Merging Two Array Objects

Is it possible to remove the "disabled" attribute using JS, but the button remains disabled?

Pressing the button results in no action

Ways to disseminate arguments when dealing with an array of arrays in JavaScript

Developing a dynamic user interface using an Angular framework and populating it with