#css #webdev #frontend #html #javascript Jak uzyskać zachowanie, że... (@look997)

#css #webdev #frontend #html #javascript

Jak uzyskać zachowanie, że po najechaniu na czerwony prostokąt i kręceniu kółkiem mszy (scrollowaniu), przesuwa się treść w zielonej ramce?
Ale czerwony prostokąt ma stać w miejscu, tak jak przy position fixed/absolute - względem zielonej ramki.

Powiedzmy, że chcę zwyczajnie przewijać treść w zielonej ramce, ale czerwony prostokąt mi przeszkadza, blokuje mi przewijanie. Jednocześnie jest on mi potrzebny bo klikam w niego i obsługuję to kliknięcie z eventem mousedown, więc pointer-events: none raczej odpada.

Aktualnie jak najechać na czerwony prostokąt i kręcić kółkiem myszy, to nic się nie dzieje, nie przewija się. Jak na białe pole w zielonej ramce, to się normalnie przewija.

Tutaj żywy przykład:
https://4vlww.csb.app/

Najlepsze
Wszystkie komentarze

uszanowanko

uszanowanko 5 l.

@look997: z-index:-1; na fix ale nie wiem czy to w czymś innym Ci nie przeszkodzi

LaylaTichy

LaylaTichy 5 l.

@look997: ewentualnie

fix[0].addEventListener("wheel", () => {
fix[0].style.pointerEvents = "none";

look997

look997 Autor 5 l.

@LaylaTichy: Z wheel i takim czymś działa:

 const fix = document.querySelector(".fix");
 fix.addEventListener("wheel", () => {
 fix.style.pointerEvents =

LaylaTichy

LaylaTichy 5 l.

ie jak najechać na czerwony prostokąt i kręcić

@look997:
pointer-events: none;

look997

look997 Autor 5 l.

@LaylaTichy: No napisałem, że ten czerwony prostokąt ma funkcję i się go klika i wtedy wykonuje się akcja. Na .fix jest akacja mousedown.

look997

look997 Autor 5 l.

@uszanowanko: Niestety przeszkodzi, bo na .fix jest akcja, że klikam na .fix i coś się dzieje (event mousedown).

look997

look997 Autor 5 l.

@uszanowanko: @LaylaTichy: Dopuszczam sztuczki z JSem, jeśli da się tak to obejść.

magic96

magic96 5 l.

@look997: position: sticky?

look997

look997 Autor 5 l.

@magic96: Nie, bo dokłada swoją wysokość do treści i wydłuża treść.

LaylaTichy

LaylaTichy 5 l.

@look997: z js zrobilbym tak ze dalbym pointer ev none na fix, a na content dalbym ten event na click i sprawdzil gdzie pozycja clicka jest wzgledem conttentu i czy lapie sie to w czerwony element

look997

look997 Autor 5 l.

@magic96: @uszanowanko: @LaylaTichy: W sumie napiszę bezpośrednio:
ten czerwony prostokąt ma być scrollbarem, który się klika i go przesuwa i on ma przesuwać treść - taki custom scrollbar.
(w rzeczywistości mam gotowy własny custom scrollbar, prócz tego opisanego buga a we wpisie dodałem coś uproszczonego, żeby łatwiej to zaprezentować i naprawić)

To ma jeszcze dodatkowe rzeczy w sobie.
Gotowe customowe scrollbar-y z neta też mają ten

look997

look997 Autor 5 l.

@LaylaTichy: No też o tym myślałem.
I jeszcze miałem pomysł, żeby scrollTop zielonej ramki się dynamicznie dodawał do top dla elementu .fix.
Ich jeszcze nie próbowałem.

Inne też miałem pomysły ale nie zadziałały.

look997

look997 Autor 5 l.

@LaylaTichy: Z wheel i ponterElent wcześniej próbowałem i nie działa, bo w ogóle się nie aktywuje wheel dla .fix - chyba dlatego, że to element, który nie ma w sobie treści do przewijania. :|

look997

look997 Autor 5 l.

@LaylaTichy: Napiszę jeszcze, że w Firefox 87 jak .fix ma border-radius większe niż zero, to działa tak jakbym chciał. xD
Ale w nowszej wersji Firefoksa już nie, i w Chromie wcale nie.

Chyba taki przypadkowy bug związany z Firefox 87. :D