如何通過滾動捕捉使拖動滾動順利
[英]How to make drag to scroll work smoothly with scroll snapping
問題描述
滾動捕捉適用於鼠標滾動，但不適用於拖動滾動。
我希望能夠真正滾動，然后讓它像正常滾動一樣卡入到位。 所以我希望它在我拖動滾動條時正常移動（不捕捉），一旦我離開它，我希望它移動並捕捉。 只是不想在拖動滾動時播放幻燈片。
任何替代解決方案？
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>
2 個解決方案
解決方案1
6 已采納 2021-06-14 07:10:57
我實際上找到了解決方案。
所以在 javascript 中，當鼠標被按住時（ function mouseIsDOwn ），設置scroll-snap-type = "none"並且當鼠標被釋放時（ function mouseUp ）設置scroll-snap-type = "y mandatory"我希望它能幫助如果有人其他人正在尋找這個。
解決方案2
3 2021-10-04 15:46:26
添加滾動行為：平滑； 集裝箱 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>
如何在滾動時平滑更改圖像大小？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.