动画回调在错误的时间调用

Question

I am trying to make a bounce effect on my custom scroller. (I'm scrolling using translate3d .) I was finally able to implement it, but the only problem now is, if you keep on scrolling out of bounds (try double scrolling and just keep doing it till it gets stuck), then it will stay out of bounds until you scroll back down (or up, depending on where it's stuck).

Like this: http://imgur.com/SHAe1E4 (for some reason, stackoverflow isn't letting me to add the gif.) code: JSFiddle

Question:

How can I make a scrolling bounce effect using JavaScript and CSS?

The rest is optional to read.

Reason why not working:

I think the reason it's doing that is: there's an animation callback event. So if the animation doesn't happen, ie, the transform doesn't change, then the animation callback will not fire.

So when it's scrolled all the way to the top or bottom, and you scroll again, (before the animation completes, so the animation callback doesn't get called, because the transform value didn't change) the animation callback will not get called, and therefore it won't scroll (bounce) back to bounds.

What I tried:

I tried checking to see if the scroll position changed, and if it didn't call the animation callback function, but it doesn't give the desired results. When you try scrolling out of bounds a lot at a time, it gives a 'stuttering' effect, and doesn't scroll all the way out of bounds, it stops midway and scrolls back. Like this: http://imgur.com/a/xHYle JSFiddle

I also tried changing the transform value by 0.1 whenever the scrolling position didn't change, therefore the animation callback will get called. The problem with that is, if you scroll out of bounds, it waits aa half a second to bounce back.
So I set the animation duration to a shorter time when the scrolling position didn't change, but if you scroll repeatedly out of bounds, ie, you keep on scrolling when it's out of bounds, up or down, then it waits a second, then bounces back. JSFiddle

 console.clear(); var innerWrapper = document.getElementById('innerWrapper'); var scrollBar = document.getElementById('scrollbar'); var scrollBarThumb = scrollBar.firstElementChild; var scrollPosition = 0; var scrolledToBottom = innerWrapper.scrollHeight - innerWrapper.parentElement.offsetHeight; scrollBarThumb.style.height = (innerWrapper.offsetHeight * innerWrapper.offsetHeight / innerWrapper.scrollHeight) + 'px'; innerWrapper.addEventListener('mousewheel', handleScroll); innerWrapper.addEventListener('DOMMouseScroll', handleScroll); innerWrapper.addEventListener('transitionend', bounceBack); innerWrapper.style.transform = 'translate3d(0px, 0px, 0px)'; function handleScroll(e) { // Prevent parents from scrolling e.preventDefault(); var direction = (e.detail < 0 || e.wheelDelta > 0) ? 1 : -1; // 1 = scroll down, -1 = scroll scrollPosition += direction * 100; // Cannot use `deltaY`, because not all browsers support it. scrollPosition = clamp(scrollPosition, -scrolledToBottom - 40, 40); // 40 = bounce amount var scrollThumbPosition = (scrollPosition * scrollBarThumb.offsetHeight / innerWrapper.parentElement.offsetHeight); scrollThumbPosition = clamp(scrollThumbPosition, -scrolledToBottom, 0); innerWrapper.style.transform = 'translate3d(0px, ' + scrollPosition + 'px, 0px)'; scrollBarThumb.style.transform = 'translate3d(0px, ' + -scrollThumbPosition + 'px, 0px)'; } function bounceBack(e) { // Scrolling stopped too high? if (scrollPosition > 0) { scrollPosition = 0; // Scrolling stopped too low? } else if (scrollPosition < -scrolledToBottom) { scrollPosition = -scrolledToBottom; // Scrolling stopped in viewport (ie not out of bounds)? } else { return; } // Bounce back with shorter animation innerWrapper.style.transitionDuration = '100ms'; innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPosition) + 'px, 0px)'; // Need a 'pause' for the transform to finish with shorter animation setTimeout(function() { // Set animation time back to original innerWrapper.style.transitionDuration = '500ms'; }); } function clamp(val, min, max) { if (typeof min !== 'number') min = 0; if (typeof max !== 'number') max = 1; return Math.min(Math.max(val, min), max); } 

 #outerWrapper { height: 400px; overflow: hidden; display: flex; background-color: black; } #innerWrapper { transform: translate3d(0px, 0px, 0px); transition-property: transform; transition-duration: 500ms; transition-timing-function: ease; } #content { background-image: url("http://images.freeimages.com/images/premium/previews/3037/30376024-beautiful-flower-portrait.jpg"); width: 400px; } #scrollbar { height: 100%; width: 50px; background-color: orange; } #scrollbar_thumb { background-color: yellow; border: 2px solid blue; box-sizing: border-box; transform: translate3d(0px, 0px, 0px); transition-property: transform; transition-duration: 500ms; transition-timing-function: ease; } 

 <div id="outerWrapper"> <div id="innerWrapper"> <div id="content"> Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor </div> </div> <div id="scrollbar"> <div id="scrollbar_thumb"></div> </div> </div> 

Answer 1

I might use the z component to make a subtle difference between each wheel event in order to trigger transition. fiddle

var i = 0;
// onmousewheel
.. el.style.transform = `translate3d(0, 40px, ${i^=1}px)` 

// ontransitionend
.. el.style.transform = `translate3d(0, 0, -1px)`

---

If the above approach is too tricky, we may do an expensive query to find what the current translation y is. Then compare it to the bounceAmount(eg 40 in your case), if they are almost identical(diff. < Number.EPSILON) then call bounceBack() directly.

var m = getComputedStyle(el).transform.match(/,\s*([^,]*?)\s*\)/)
m ? m[1] : 0 // current translation y

---

Update

If the content is required to be bounce back instantly, we can simply disable onwheel when motion starts, then re-enable it after whole motion has completed. This does not require the z component trick anymore. fiddle