Is it possible to smooth scroll when a bound position updates?

[sureshjoshi]

I'm using svelte-neodrag as shown below, and it's working great to scroll content around one of my divs. What I'm wondering is if it's possible to update the position programmatically, and have a "smooth scroll" to that location? Currently, when I update a value - the scroller jumps to that new location.

I know I can emulate a smooth scroll by adding breakpoints between the current and the final location - but is there any native capability to do this?

<div
  bind:clientWidth={thumbWidth}
  bind:clientHeight={thumbHeight}
  use:draggable={{
    axis: "x",
    bounds: "parent",
    position: { x, y },
    onDrag: ({ offsetX, offsetY }) => {
      x = offsetX;
      y = offsetY;
    },
  }}>

[N-NeelPatel]

@sureshjoshi - The svelte-neodrag library you are using provides basic dragging functionality, but it does not have built-in support for smooth scrolling to a specific position. If you want to achieve a smooth scroll effect programmatically, you will need to implement it yourself or use another library that provides such functionality.

To implement smooth scrolling, you can use CSS transitions or animations combined with JavaScript to update the scroll position gradually over time. Here's a simplified example of how you can achieve smooth scrolling programmatically using the scrollTo method:

const scrollContainer = document.getElementById('scroll-container');
const targetPosition = 500; // The desired scroll position

scrollContainer.scrollTo({
  top: targetPosition,
  behavior: 'smooth'
});

In this example, scroll-container is the ID of the element you want to scroll. The scrollTo method is called on that element, specifying the target position and setting the behavior option to 'smooth' to enable the smooth scroll effect.

You can adapt this code to your specific scenario and incorporate it into your Svelte component logic to achieve the desired smooth scrolling behavior.