1

我有一种抓取效果，当我们握住一个元素时，它会正常滚动，但在mouseup时，它会为容器和子项提供滚动捕捉，以便它在元素的开头停止，但是当它为元素提供类时，它会对齐立即而不是像课堂总是在那里那样顺利，我怎样才能让它动画？

// DISABLE SELECTION FOR ELEMENTS
const childs = Array.from(document.querySelector('.container').children)
childs.forEach(undrag)
function undrag(e) {
    e.setAttribute("draggable", "false")
    e.style.cssText="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
    e.unselectable="on"
    e.onselectstart="return false;" 
    e.onmousedown="return false;"
    const subchilds = Array.from(e.children)
    subchilds.forEach(undrag)
}

// GRABBING EFFECT
const container = document.querySelector('.container')
let mousedown = false;
document.body.onmousedown = () => {mousedown = true}
document.body.onmouseup = () => {mousedown = false}
let firstpos;
let currentpos;
let currentscroll;
// Remove smooth scrolling and scrol-snap for free scrolling and get the scroll/cursor positions
container.addEventListener('mousedown', down)
function down(e) {
    currentscroll = container.scrollLeft
    firstpos = e.clientX
    container.style.cssText="scroll-behavior: initial; scroll-snap-type: none;"
    childs.forEach(e => {
        e.style.cssText="scroll-snap-align: none;"
    })
}
container.addEventListener('mousemove', move)
function move(e) {      //  Grab Effect
    if (mousedown === true) {
        currentpos = e.clientX
        const moved = currentpos - firstpos
        container.scroll((currentscroll - moved), 0)
    }
}
// Add smooth scrolling with scroll-snap on releasing mouse
container.addEventListener('mouseup', up)
function up() {
    container.style.cssText="scroll-behavior: smooth; scroll-snap-type: x mandatory;"
    childs.forEach(e => {
        e.style.cssText="scroll-snap-align: start;"
    })
}
* {
  box-sizing: border-box;
}

.container {
    background-color: #202225;
    color: #fff;
    width: 100%;
    display: flex;
    overflow: scroll;
}

.container::-webkit-scrollbar {
    display: none;
}

.child {
    min-width: 20%;
    backgroud-color: #40444B;
    border: 3px solid #648CFF;
    text-align: center;
}
<div class="container">
  <div class="child">
    <h3>First Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Last Element</h3>
  </div>
</div>

4

0 回答 0