Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di W3Saverio
    Registrato dal
    Sep 2015
    residenza
    La Spezia
    Messaggi
    6

    Problema scorrimento DIV senza scrollbar

    Buonasera ragazzi ho un problema (sciocco) che non riesco proprio a risolvere...
    Praticamente ho un DIV con un contenuto che risulta più grosso di esso e vorrei poterlo visualizzare muovendomi dentro di esso tramite il tasto sinistro del mouse, come su Google Maps insomma...come faccio?

    Vi posto il codice su cui sto facendo le prove anche se per ora è praticamente solo HTML:
    Codice PHP:
    <div style="width: 120px; height: 120px; overflow: hidden;"><img src="http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg"></div

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Ciao e benvenuto.
    Prova così <
    div style="width: 120px; height: 120px; overflow: auto;"> ma cosa centrerebbe questo problema con il javascript?
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it L'avatar di W3Saverio
    Registrato dal
    Sep 2015
    residenza
    La Spezia
    Messaggi
    6
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Ciao e benvenuto.
    Prova così <
    div style="width: 120px; height: 120px; overflow: auto;"> ma cosa centrerebbe questo problema con il javascript?
    Praticamente qualunque overflow io imposti se provo a scorrere nel div tramite il tasto sinistro del mouse non funziona...non credo sia una impostazione "settabile" tramite solo l'HTML... Non so più dove sbattere la testa

  4. #4
    Moderatore di JavaScript L'avatar di br1
    Registrato dal
    Jul 1999
    Messaggi
    19,998
    Il suggerimento funziona... sempre che quello che tu chiami "scorrere nel div tramite il tasto sinistro del mouse" sia l'uso standard della barra di scorrimento...
    Il guaio per i poveri computers e' che sono gli uomini a comandarli.

    Attenzione ai titoli delle discussioni: (ri)leggete il regolamento
    Consultate la discussione in rilievo: script / discussioni utili
    Usate la funzione di Ricerca del Forum

  5. #5
    Utente di HTML.it L'avatar di W3Saverio
    Registrato dal
    Sep 2015
    residenza
    La Spezia
    Messaggi
    6
    Quote Originariamente inviata da br1 Visualizza il messaggio
    Il suggerimento funziona... sempre che quello che tu chiami "scorrere nel div tramite il tasto sinistro del mouse" sia l'uso standard della barra di scorrimento...
    Ok hai perfettamente ragione,non mi sono spiegato bene
    Praticamente si parla di un DIV senza scrollabar (overflow: hidden;) che contiene una immagina più grossa delle sua dimensione (l'immagine è 2560x1600 pixel e il div, dell'esempio, è 120x120 pixel) e che si può esplorare tramite il tasto sinistro del mouse...come su Google Maps insomma, in cui tieni premuto il tasto sinistro del mouse e ti muovi sulla mappa per spostarti ed esplorare nuovi posti...

    Ora è più chiaro?

    Ricreare questo effetto insomma... NO scrollbar, ESPLORAZIONE tramite tasto sinistro del mouse...
    Ultima modifica di W3Saverio; 02-09-2015 a 12:40

  6. #6
    Utente di HTML.it L'avatar di W3Saverio
    Registrato dal
    Sep 2015
    residenza
    La Spezia
    Messaggi
    6
    Risolto
    Per chiunque avesse il mio stesso problema:
    Codice PHP:
    <html>
    <
    head>
        <
    meta charset="UTF-8">
        <
    title>Pagina di prova</title>
    <
    style>
    body {
        
    margin0px;
    }
     
    .
    free {
        
    positionabsolute;
        
    margin-leftauto;
        
    margin-rightauto;
        
    width100%;
        
    height100%;
        
    overflowhidden;
        
    cursorcrosshair;
    }
     
    .
    free:active {
        
    cursormove;
    }
    </
    style>
     
    <
    script type="text/javascript">
        !function(
    e,n){"function"==typeof define&&define.amd?define(["exports"],n):n("undefined"!=typeof exports?exports:e.dragscroll={})}(this,function(e){var n=window,o=document,t="mousemove",l="mouseup",i="mousedown",r="EventListener",c="add"+r,f="remove"+r,m=[],s=function(e,r){for(e=0;e<m.length;)r=m[e++],r[f](i,r.md,0),n[f](l,r.mu,0),n[f](t,r.mm,0);for(m=o.getElementsByClassName("dragscroll"),e=0;e<m.length;)!function(e,o,r,f){e[c](i,e.md=function(e){f=1,o=e.clientX,r=e.clientY,e.preventDefault(),e.stopPropagation()},0),n[c](l,e.mu=function(){f=0},0),n[c](t,e.mm=function(n,t){t=e.scroller||e,f&&(t.scrollLeft-=-o+(o=n.clientX),t.scrollTop-=-r+(r=n.clientY))},0)}(m[e++])};"complete"==o.readyState?s():n[c]("load",s,0),e.reset=s});
    </script>
    </head>
     
    <body>
     
    <div class="free dragscroll">
        <img src="http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg">
    </div>
     
    </body>
    </html> 

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.