New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Automatic and slow scroll with dragFree #105
Comments
Hello Félix (@flayks), Thank you for your question. How about this CodeSandbox? Does it meet your requirements? Best, |
@davidjerleke, you are a code angel! It absolutely does what I had in mind. Thank you 🙌 |
Great news @flayks! I'm closing this as resolved then. Enjoy 🙂. |
Alright @davidjerleke, I spoke too soon. I'm facing some issues with this feature, I'm using Next. Related to the code you made as well for the breakpoint checking, this throws me back a 500 error. Not much detail tho, unfortunately :/ import React, { useState, useEffect, useCallback } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'
import { debounce } from '../../utils/functions'
const Scroller = ({ children, screenThreshold = 549, settingsProps = {} }) => {
const [isActive, setIsActive] = useState(false)
const [scrollProgress, setScrollProgress] = useState(0)
const [scroller, embla] = useEmblaCarousel({
// Settings
containScroll: 'trimSnaps',
dragFree: true,
...settingsProps
})
// Check
const checkEmbla = useCallback(() => {
// Enable only on a small screen
const smallScreen = document.documentElement.clientWidth < screenThreshold
setIsActive(smallScreen)
if (isActive) {
// Scroll event
onScroll()
embla.on('scroll', onScroll)
// Auto scroll slowly
const engine = embla.dangerouslyGetEngine()
engine.scrollBody.useSpeed(0.01)
engine.scrollTo.index(embla.scrollSnapList().length - 1)
}
}, [embla, setIsActive])
// On scroll
const onScroll = useCallback(() => {
if (!embla) return
// Update scrollbar when scrolling
setScrollProgress(Math.max(0, Math.min(1, embla.scrollProgress())) * 100)
}, [embla, setScrollProgress])
// Init
useEffect(() => {
// Check for carousel
checkEmbla()
// Resize
window.addEventListener('resize', debounce(checkEmbla, 150))
}, [checkEmbla])
return isActive ? (
<div className="scroller">
<div className="scroller__container grid" ref={isActive ? scroller : null}>
<div className="scroller__pan">
{children.map((child, index) => (
<div className="scroller__item" key={index}>
{child}
</div>
))}
</div>
</div>
<div className="scroller__progress">
<div style={{ transform: `translateX(${scrollProgress}%)` }} />
</div>
</div>
) : children
}
export default Scroller |
I suspect that the problem is coming from this line: engine.scrollBody.useSpeed(0.01) Commenting it indeed takes the Scroller component to the last item with no dramas, but as soon as I set the |
Hi @flayks, Just guessing but maybe you should perform a check if the window object exists? It won’t be there on the server right? Best, |
@davidjerleke that is true. Does |
@flayks, I’m not sure because I don’t have access to my computer right now. Try document? I guess Embla will try to scroll a container which should be an HTML element, but doesn’t exist on the server. But to be honest I’m not sure if that’s what’s causing this. |
@flayks I noticed that your checkEmbla function doesn’t check for the existence of the |
@davidjerleke I'll give it a try. I tried to add it at the first place, but as soon as I do that: const checkEmbla = useCallback(() => {
if (!embla) return
... It stops any kind of code after and breaks the detection with the breakpoint. |
@flayks the if statement should probably be inside isActive and wrap the auto scrolling code. But also guessing at this point. |
@davidjerleke right. It works in the isActive indeed, thanks! |
@flayks Maybe the window you use for the resize handler and the document for clientWidth need checks if they exist so they don’t cause 500 on the server side (unrelated to Embla)? If this doesn’t solve the issue, I need a more detailed error log in order to debug this. Because I’m not sure Embla is causing the issue. |
@davidjerleke I think it's alright as the whole code is ran in an |
@flayks I see. Is the issue present on the browser or server? Sorry but I still don’t have much useful information and a good understanding of the issue. |
@davidjerleke ok, I've done some investigating and with a fresh NextJS app and only the Scroller component with some divs inside, and it works. It must be from somewhere else in my app, can't tell where but I'll have a deeper look. The code works tho! 👌 |
Okay @davidjerleke, I've got some news, and it's (I suppose), not Embla, but Preact. I configured my NextJS project using Preact instead of React, and there is something in the |
Thanks for the update @flayks. So do you intend to use Embla with React or Preact? Or was the Preact setup a mistake? Sounds strange, but I only have experience with React, not Preact, so I can’t even start guessing why this is happening. Especially without an error log. |
@davidjerleke I started the project using Next with React but I tried to use Preact in order to reduce the bundle size, but I feel that it's causing more issues than giving a lightweight code haha |
Thanks for clarifying Félix (@flayks). That sounds a bit odd yeah. With no intention of being rude, at the time of writing Embla Carousel works with Vanilla-JS and React. I haven't tested Embla with Preact at all. I might decide to add support in the future and in that case the repo you shared may be helpful for debugging purposes 👍. I'm glad it works with React though 🙂. Best, |
@davidjerleke no worries. I just found that weird. As I don't know much about Preact either I just wanted to give it a go, but no big deal really, I switched back to React instead. That would be good for the peeps using it tho, as it's a super good lightweight alternative to React. Thanks for your help anyway! |
just stumbled across this and wondered if this is an alright approach to the same problem, or am I abusing the duration and delay settings?
|
@raymondarevalo no need to look for temporary CodeSandbox solutions anymore. A plugin for this is finished and will be released very soon. Stay tuned. Here’s the PR for it: |
@alisayed95 no example sandbox yet but the plugin has been released. |
@davidjerleke random question, but would you have any reference on how 'embla.dangerouslyGetEngine()' was used before this new plugin? I'm currently doing this
But then realized I should probably be using 'dangerouslyGetEngine()' |
@raymondarevalo what do you want to achieve? If it's unrelated this issue. Please ask for help here. |
@davidjerleke Oh yeah, it's related to this issue. Basically I wanted to create an infinite loop using a previous method that was being used on this thread. However, I noticed that the engine.location wasn't being reset after an entire loop and therefore embla.scrollProgress() was going beyond 1. `
} I'm currently using 'embla 7.1'. Last note, I tried using the new plugin, but realized it broke whenever I resized the screen. |
I was wondering if there is a way to slowly auto scroll the content of a carousel with the
dragFree
option? In order to sort of show to users that there is more content in a nice way.Kind of something like that, but automatically:
The text was updated successfully, but these errors were encountered: