[Javascript]/[CSS] Voorkom pagina scroll bij drag.

[guanche]

Bij het ontwikkelen van een stukje code zit ik met het volgende probleem, welke ik niet heb kunnen oplossen via de gebruikelijke resources.

Wat -- knip -- is 1 div ter grootte van het uiteindelijke grootte van een afbeelding met daarin een te grote foto. De div heeft een overflow:hidden en er staan een paar controls (gemaakt mbv Yui) er omheen welke de afbeelding kunnen schalen en verplaatsen.

Nu kwam ik er achter dat als je de pagina iets kleiner maakt en zorgt dat de scroll-balk iets naar onder getrokken staat, hij weer omhoog springt zodra je de afbeelding gaat verplaatsen. Dit omdat de afbeelding de bovenkant van de pagina raakt. Dit verspringen is verre van gewenst.

Hiervoor bedacht ik me 2 opties. Ten eerste met script de scroll-balken uitzetten als de drag begint. Maar dat lijkt me geen mooie optie. Ten tweede het geheel altijd aanroepen in een iframe. Ik neem aan dat ik niet hoef uit te leggen waarom dat liever niet gewenst is.

Nu wilde ik weten of iemand hier een creatieve oplossing voor weet in javascript of zelfs met CSS alleen.

De link met de volledige source is;
-- knip --

Algemene opmerkingen zijn uiteraard ook welkom!

Edit: Ter volledigheid, dit gedrag doet zich, zo ver ik kan testen, in alle van de meest gebruikte browsers voor.

[ Voor 13% gewijzigd door guanche op 21-11-2013 12:43 ]

[Verwijderd]

Hmm ik kan het probleem niet echt reproduceren... in saf en ff op de mac


edit: herstel ik was weer eens te snel...

overflow:hidden op de body zetten?

Levert wel wat andere problemen op...

[ Voor 48% gewijzigd door Verwijderd op 30-12-2009 16:31 . Reden: te snel ]

[guanche]

De scroll balken verdwijnen dan algeheel. Lijkt mij ook minder..

[Blaise]

Je zou kunnen proberen de scrolltop kunnen opslaan bij dragstart, en tijdens het draggen bij het toepassen van de nieuwe top en left voor de afbeelding, ook de scrolltop zetten op de opgeslagen waarde. Dat is wel een beetje een hack, want je bent dan eigenlijk al te laat en misschien krijg je dan gestotter.

Het "Mijn plaatje is uit beeld!" issue kan je trouwens fixen door een Math.min en Math.max te zetten op de left en top, zodat deze nooit groter zijn dan de coördinaten waarop de afbeelding niet meer zichtbaar is.

[guanche]

inderdaad zou de scroll top opslaan ook mogelijk zijn, maar die had ik eigenlijk al weg gestreept vanwege de hoeveelheid listeners die ik dan zou moeten toevoegen. En dan nog houd je het stotteren.

Maargoed, ik moet er verder mee, en het wordt een mooie iframe over de header heen. Alleen even uitzoeken wat de mogelijkheden zijn om dan vanuit die iframe weer terug te communiceren naar de pagina zelf.

Bedankt in ieder geval