Problema scorrimento DIV

Discussione in 'Javascript' iniziata da saverio_web, 1 Settembre 2015.

  1. saverio_web

    saverio_web Utente Attivo

    Registrato:
    1 Novembre 2011
    Messaggi:
    52
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    La Spezia
    Home Page:
    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:
    PHP:
    <div style="width: 120px; height: 120px; overflow: hidden;"><img src="http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg"></div
    PS: scusate se la discussione può risultare doppia, ma l'ho ri-creata in questa sezione perché mi è stato detto essere più appropriata.
     
  2. saverio_web

    saverio_web Utente Attivo

    Registrato:
    1 Novembre 2011
    Messaggi:
    52
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    La Spezia
    Home Page:
    Nessuna soluzione???
     
  3. littelme

    littelme Nuovo Utente

    Registrato:
    1 Settembre 2015
    Messaggi:
    13
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    devi modificare overflow: hidden; con overflow: scroll; :)
     
  4. saverio_web

    saverio_web Utente Attivo

    Registrato:
    1 Novembre 2011
    Messaggi:
    52
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    La Spezia
    Home Page:
    Ma non voglio vedere la scrollbar...voglio fare in modo che questa venga sostituita dal pulsante sinistro del mouse, che tenendolo premuto all'interno del div mi permetta di spostarmi dentro di esso, come se fossi in Google Maps...
     
  5. littelme

    littelme Nuovo Utente

    Registrato:
    1 Settembre 2015
    Messaggi:
    13
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Ah scusa, avevo capito male! Non saprei come aiutarti perchè non ho mai provato a fare quello che vorresti fare tu. Prova a vedere gli esampi che ci sono qui http://www.html.it/pag/18695/draggable-trascinare-oggetti/ e cerca di riadattarli un attimino :) buon divertimento!
     
  6. saverio_web

    saverio_web Utente Attivo

    Registrato:
    1 Novembre 2011
    Messaggi:
    52
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    La Spezia
    Home Page:
    Risolto :mavieni:
    Per chiunque avesse il mio stesso problema:
    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>

    PS: Grazie littelme, ho smanecchiato un bel po' con i codici che ho trovato in quella pagina ed ho elaborato anche una soluzione con il draggable di jQuery :fonzie:
     
    Ultima modifica: 3 Settembre 2015
  7. saverio_web

    saverio_web Utente Attivo

    Registrato:
    1 Novembre 2011
    Messaggi:
    52
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    La Spezia
    Home Page:
    Questa è la soluzione con jQuery :p
    PHP:
    <!doctype html>
    <
    html>
    <
    head>
    <
    title></title>
    <
    style>
    body {
        
    margin0px;
    }

    .
    div_ {
        
    positionabsolute;
        
    margin-leftauto;
        
    margin-rightauto;
        
    width100%;
        
    height100%;
        
    overflowhidden;
        
    cursorcrosshair;
    }

    .
    div_:active {
        
    cursormove;
    }

    #draggable {
        
    width2560px;
        
    height1600px;
        
    backgroundurl('http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg');
    }

    </
    style>

    <
    script type="text/javascript" src="http://www.html.it/guide/esempi/jqueryui/esempi/js/jquery-1.3.2.min.js"></script>
    <
    script type="text/javascript" src="http://www.html.it/guide/esempi/jqueryui/esempi/js/jquery-ui-1.7.2.custom.min.js"></script>
    <
    script type="text/javascript">
        $(function() {
            $(
    "#draggable").draggable({ containment: [-110000, -800] });
            $(
    ".ui-draggable").disableSelection();
        });
    </
    script>

    </
    head>

    <
    body>
        <
    div class="div_" role="main">
            <
    div id="draggable" class="ui-widget-content ui-draggable" unselectable="on" style="position: relative;"></div>
        </
    div>
    </
    body>
    </
    html>
    PS: nel codice sono riportati dei collegamenti ad il sito di HTML, necessari se si vuole far funzionare lo script (sono file jQuey modificati, con quegli originali a me non funziona)
     
Sto caricando...

Condividi questa Pagina