scroll-snap-points

问题 I'm using scroll-snap in combination to position: sticky which seemed like an elegant approach to enable a stacking card effect while scrolling. It works pretty great on desktop but on Safari (iOS12.1) I'm experiencing glitches where sometime the cards scroll all together, skipping content. The most obvious way to replicate the bug on mobile Safari is to: scroll down to the bottommost screen close (blur) and reopen Safari then trying to scroll back up again Bug experienced: it's skipping all

问题 I'm using scroll-snap in combination to position: sticky which seemed like an elegant approach to enable a stacking card effect while scrolling. It works pretty great on desktop but on Safari (iOS12.1) I'm experiencing glitches where sometime the cards scroll all together, skipping content. The most obvious way to replicate the bug on mobile Safari is to: scroll down to the bottommost screen close (blur) and reopen Safari then trying to scroll back up again Bug experienced: it's skipping all

问题 After you scrolled in a container which has some sort of CSS scroll-snapping active, how long is the delay since user-scrolling ended that the browser starts scrolling to the snapping position? Motivation I wrote an answer to question CSS Scroll Snap with Animation Effect where I simulate a scrollend event by debouncing the scroll event callback by 250 ms. This seems to be close enough to the real value in Chrome browser. But it would be nice to get some first-class values. There might even

来源： https://stackoverflow.com/questions/56769791/alternative-to-css-scroll-snap

来源： https://stackoverflow.com/questions/56769791/alternative-to-css-scroll-snap

问题 [Precondition] I am having difficulty figuring out how to make a Number Picker Widget behave similarly to the mobile picker component. If the user assigns a number by default, then the selected number should be automatically snap to the center when page load. [Problems] How can I snap this element <div class="cell selected">10</div> to the center of the scrollport by default? Do not rely on any plugins. "use strict"; console.clear(); { const selector = "scrollport"; const selected = "selected

问题 [Precondition] I am having difficulty figuring out how to make a Number Picker Widget behave similarly to the mobile picker component. If the user assigns a number by default, then the selected number should be automatically snap to the center when page load. [Problems] How can I snap this element <div class="cell selected">10</div> to the center of the scrollport by default? Do not rely on any plugins. "use strict"; console.clear(); { const selector = "scrollport"; const selected = "selected

问题 I understand it's still very new and experimental, but have been playing around with css scroll-snap, and couldn't get it to work for a while. I eventually realised that whilst I am using @font-face in my css, scroll snap doesn't work. If I change the font-family to 'Arial' instead of my defined font, it works fine. Anybody else come across this? Codepen: https://codepen.io/galvinben/pen/LgzLxK @font-face { font-family: 'fontName'; src: url('https://fontlibrary.org/assets/fonts/bebas

问题 I am trying to implement a scroll view that snaps to points while scrolling . All the posts here I've seen about snapping to a point 'after' the user has ended dragging the scroll. I want to make it snap during dragging. So far I have this to stop the inertia after dragging and it works fine: func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) { targetContentOffset.memory = scrollView.contentOffset } I

问题 https://codepen.io/thomaslindstr_m/pen/qJLbwa Pretty bare bones example above. I want to fade out the child I scrolled away from , but when CSS Scroll Snap is enabled, it starts glitching really bad on my iPhone iOS 12.0.1. See video here: https://file-qacepzxlkb.now.sh/ Before the reload I disabled Scroll Snap (JavaScript still running), after the reload, I enable it. Here's the JavaScript: const windowWidth = window.innerWidth; const viewsElement = document.querySelector('.views'); const