No scroll-snap compatibility

[markusand]

It doesn't seem to work when using css scroll-snap-align

.carousel {
    position: relative;
    display: flex;
    height: 500px;
    width: 100%;
    scroll-snap-type: x mandatory;
    overflow-x: auto;

    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
}

.carousel .slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    scroll-snap-align: center;        <--- Here is the problem
    scroll-snap-stop: always;
}

Is there any way to make it work?

[donmbelembe]

Please what is the version you are using?

On Wed, Feb 12, 2020, 1:22 AM Marc Vilella notifications@github.com wrote:

It doesn't seem to work when using css scroll-snap-align

.carousel { position: relative; display: flex; height: 500px; width: 100%; scroll-snap-type: x mandatory; overflow-x: auto;

/ Hide scrollbar / -ms-overflow-style: none; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .carousel .slide { flex: 0 0 100%; height: 100%; position: relative; box-sizing: border-box; scroll-snap-align: center; <--- Here is the problem scroll-snap-stop: always; }

Is there any way to make it work?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/donmbelembe/vue-dragscroll/issues/64?email_source=notifications&email_token=ACP46PIDW3QD63WEWRA4UE3RCM6LZA5CNFSM4KTOLJJ2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4IMYOASQ, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACP46PMZRUQYWXZ2K42FCPTRCM6LZANCNFSM4KTOLJJQ .

[markusand]

It's using version 2.0.1

[Skwecode]

Did you find a solution? I'm facing the same problem.

[markusand]

Didn't dig too deep into it. In my case I was using for a lightweight carousel, but it might not be the most appropriate usecase for this module. I moved to a specific carousel option.

[VasilVerdouw]

@donmbelembe Just wanted to let you know this is still a problem. I'm using the newest version but when using scroll snap dragscroll doesn't work.

[VasilVerdouw]

Also for anyone wondering, I am currently using the following code as an alternative:

const optionsRef = ref(null); // as Ref<HTMLDivElement | null>; // uncomment for typescript
const startY = ref(0);
const scrollTop = ref(0);
const isDown = ref(false);

optionsRef.value.addEventListener("mousedown", (e) => {
    if (!optionsRef.value) return;
    isDown.value = true;
    startY.value = e.pageY - optionsRef.value.offsetTop;
    scrollTop.value = optionsRef.value.scrollTop;
    document.body.style.cursor = "grabbing";
  });
  window.addEventListener("mouseup", () => {
    isDown.value = false;
    document.body.style.cursor = "default";
  });
  window.addEventListener("mousemove", (e) => {
    if (!optionsRef.value) return;
    if (!isDown.value) return;
    e.preventDefault();
    const y = e.pageY - optionsRef.value.offsetTop;
    const walk = y - startY.value;
    optionsRef.value.scrollTop = scrollTop.value - walk;
  });

[donmbelembe]

hello @VasilVerdouw Would you consider making a pull request?

[VasilVerdouw]

hello @VasilVerdouw Would you consider making a pull request?

Hey @donmbelembe, Sure, I'd love to, but the code I gave in my previous reply is a complete replacement of your library and honestly felt somewhat like a hack. I haven't yet looked at what your code does. Maybe I can combine some elements? Would like to hear your thoughts first.