javascript - How to make drag to scroll work smoothly with scroll snapping

Scroll snapping works well with mouse scroll but not with drag to scroll.

I want to be able to actually scroll and then for it to snap in place like it does with normal scrolling. So I want for it to move normally while I drag scroll(no snapping) and once I leave it, I would like it to travel and snap. Just don't want a slideshow while drag scrolling.

Any alternative solution?

const childern = document.querySelectorAll(".childern");
const parent = document.querySelector(".container");

let startX;
let scrollTop;
let isDown;

parent.addEventListener("mousedown", (e) => mouseIsDown(e));
parent.addEventListener("mouseup", (e) => mouseUp(e));
parent.addEventListener("mouseleave", (e) => mouseLeave(e));
parent.addEventListener("mousemove", (e) => mouseMove(e));

function mouseIsDown(e) {
  isDown = true;
  startY = e.pageY - parent.offsetTop;
  scrollTop = parent.scrollTop;
}
function mouseUp(e) {
  isDown = false;
}
function mouseLeave(e) {
  isDown = false;
}
function mouseMove(e) {
  if (isDown) {
    e.preventDefault();
    //Move vertcally
    const y = e.pageY - parent.offsetTop;
    const walkY = (y - startY) * 5;
    parent.scrollTop = scrollTop - walkY;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100vh;
  overflow: hidden;
}

.container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.childern {
  height: 100vh;
  scroll-snap-align: start;
}
.one {
  background-color: black;
}
.two {
  background-color: rgb(36, 36, 36);
}
.three {
  background-color: rgb(71, 71, 71);
}

<html>
  <head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="childern one"></div>
      <div class="childern two"></div>
      <div class="childern three"></div>
    </div>
  </body>
  <script src="app.js"></script>
</html>

Scroll snapping works well with mouse scroll but not with drag to scroll.

Any alternative solution?

const childern = document.querySelectorAll(".childern");
const parent = document.querySelector(".container");

let startX;
let scrollTop;
let isDown;

parent.addEventListener("mousedown", (e) => mouseIsDown(e));
parent.addEventListener("mouseup", (e) => mouseUp(e));
parent.addEventListener("mouseleave", (e) => mouseLeave(e));
parent.addEventListener("mousemove", (e) => mouseMove(e));

function mouseIsDown(e) {
  isDown = true;
  startY = e.pageY - parent.offsetTop;
  scrollTop = parent.scrollTop;
}
function mouseUp(e) {
  isDown = false;
}
function mouseLeave(e) {
  isDown = false;
}
function mouseMove(e) {
  if (isDown) {
    e.preventDefault();
    //Move vertcally
    const y = e.pageY - parent.offsetTop;
    const walkY = (y - startY) * 5;
    parent.scrollTop = scrollTop - walkY;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100vh;
  overflow: hidden;
}

.container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.childern {
  height: 100vh;
  scroll-snap-align: start;
}
.one {
  background-color: black;
}
.two {
  background-color: rgb(36, 36, 36);
}
.three {
  background-color: rgb(71, 71, 71);
}

<html>
  <head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="childern one"></div>
      <div class="childern two"></div>
      <div class="childern three"></div>
    </div>
  </body>
  <script src="app.js"></script>
</html>

Share Improve this question asked Jun 13, 2021 at 21:16 Naman 3821 gold badge5 silver badges18 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 9

I actually found a solution for it.

So in javascript, when mouse is held down (function mouseIsDOwn), set scroll-snap-type = "none" and when mouse is released (function mouseUp) set scroll-snap-type = "y mandatory" I hope it helps if someone else is looking for this.

Add scroll-behavior: smooth; in .container class

const childern = document.querySelectorAll(".childern");
const parent = document.querySelector(".container");

let startX;
let scrollTop;
let isDown;

parent.addEventListener("mousedown", (e) => mouseIsDown(e));
parent.addEventListener("mouseup", (e) => mouseUp(e));
parent.addEventListener("mouseleave", (e) => mouseLeave(e));
parent.addEventListener("mousemove", (e) => mouseMove(e));

function mouseIsDown(e) {
  isDown = true;
  startY = e.pageY - parent.offsetTop;
  scrollTop = parent.scrollTop;
}
function mouseUp(e) {
  isDown = false;
}
function mouseLeave(e) {
  isDown = false;
}
function mouseMove(e) {
  if (isDown) {
    e.preventDefault();
    //Move vertcally
    const y = e.pageY - parent.offsetTop;
    const walkY = (y - startY) * 5;
    parent.scrollTop = scrollTop - walkY;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100vh;
  overflow: hidden;
}

.container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.childern {
  height: 100vh;
  scroll-snap-align: start;
}
.one {
  background-color: black;
}
.two {
  background-color: rgb(36, 36, 36);
}
.three {
  background-color: rgb(71, 71, 71);
}

<html>
  <head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container" style="scroll-behavior: smooth;">
      <div class="childern one"></div>
      <div class="childern two"></div>
      <div class="childern three"></div>
    </div>
  </body>
  <script src="app.js"></script>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to make drag to scroll work smoothly with scroll snapping - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)