Is there a way to adjust the scrollLeft of a div according to the clientX position during a

Question

Is there a way to adjust the scrollLeft of a div according to the clientX position during a

I am attempting to create a scrollable div that scrolls when the mouse is dragged inside of it.

For a basic implementation, check out this code pen.

I am struggling with understanding how to work with scrollLeft and clientX. I believe I need to adjust the scrollLeft position to be

clientX + the initial scrollBar position when the drag begins

. However, they seem to be in different relative positions?

This leads to a slightly "jumpy" feeling when starting to drag.

function mouseMove(event) {
  if (!dragging) return;
  
  const {scrollLeft} = initScroll;
  
  // Even if I click exactly where the bar starts the positions are way off ...
  div.scrollLeft = event.clientX + scrollLeft;
}

In this screenshot, I clicked at the beginning of the bar but the scrollLeft value is 548 while clientX is 282?

How can I improve the smoothness of this interaction?

https://i.sstatic.net/m2jnp.png

javascript

Answer 1

Answer №1

It is recommended to constantly reset the initPosition value whenever the mouse is in motion and being dragged. Rather than reassigning the scrollLeft, it can be more effective to subtract the difference between the current clientX and the initial initPosition:

var dragging = false;
var startX = 0;
var elem = document.querySelector('.draggable');
document.addEventListener('mousedown', (e) => (dragging = true,startX = e.clientX))
document.addEventListener('mouseup', () => (dragging = false))
document.addEventListener('mousemove', function(e) {
  if (!dragging) return;
  elem.scrollLeft -= e.clientX - startX;
  startX = e.clientX;
})

.draggable {
  overflow-y: auto;
}

.draggable .content {
  width: 200%;
  background-color: red;
  height: 100px;
}

<div class="draggable">
  <div class="content"></div>
</div>

Answer 2

It is recommended to constantly reset the initPosition value whenever the mouse is in motion and being dragged. Rather than reassigning the scrollLeft, it can be more effective to subtract the difference between the current clientX and the initial initPosition:

var dragging = false;
var startX = 0;
var elem = document.querySelector('.draggable');
document.addEventListener('mousedown', (e) => (dragging = true,startX = e.clientX))
document.addEventListener('mouseup', () => (dragging = false))
document.addEventListener('mousemove', function(e) {
  if (!dragging) return;
  elem.scrollLeft -= e.clientX - startX;
  startX = e.clientX;
})

.draggable {
  overflow-y: auto;
}

.draggable .content {
  width: 200%;
  background-color: red;
  height: 100px;
}

<div class="draggable">
  <div class="content"></div>
</div>

Is there a way to adjust the scrollLeft of a div according to the clientX position during a

Answer №1

Similar questions

What is the process for loading an image from the FileSystem using expo?

Examining AngularJS ng-click arguments once all Angular content has been loaded

The error remains a mystery to the console - could it be possibly linked to the onclick() method?

Obtain individual information from XML

Retrieving information upon page loading and setting it as select options within a Vue JS environment

Guide on accessing the fastify application instance within an imported module

When do Angular.js memory leaks become a cause for concern?

Task that merges multiple JSON files into one using Gulp

Content changing programmatically does not reset the scrollHeight

What is the best way to retrieve chosen values from a Bootstrap multiple selectpicker?

An issue in ASP.net user control not triggering a specific javascript function

The PHP shopping cart file is returning an undefined JSON response

Is it appropriate to use a component inside an entry component?

When a specific item is selected from a drop-down menu, text boxes and drop-downs will dynamically appear and change

Secondary Electron window not properly receiving IPC messages

Modify session variable upon link click

Retrieve the accurate file name and line number from the stack: Error object in a JavaScript React Typescript application

If you scroll quickly, watch out for the flickering of the fadeIn and fadeOut

Modify the content of a separate division by selecting a different item in a list with the help of Vue.js and TypeScript

I aim to utilize lodash filter to swap out any null values with zero