[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/

[LaylaTichy]

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

@look997:
pointer-events: none;

[look997]

@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.

[uszanowanko]

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

[look997]

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

[look997]

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

[magic96]

@look997: position: sticky?

[look997]

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

[LaylaTichy]

@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]

@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

[LaylaTichy]

@look997: ewentualnie

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

[look997]

@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]

@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]

@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

[look997]

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

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