Scorri un div quando ci si concentra su un div interno

Ho bisogno di fare un div scorrevole, scorrere anche se il mouse è sul contenuto (all'interno del div scorrevole), e non solo accanto ad esso (dove è vuoto). Questo è quello che ho finora:Scorri un div quando ci si concentra su un div interno

var main = document.getElementById('main-site'); 
var maxTop = main.parentNode.scrollHeight-main.offsetHeight; 

main.parentNode.parentNode.onscroll = function() { 
    main.style.top = Math.min(this.scrollTop,maxTop) + "px"; 
}

In Chrome è ok In IE8 + è ok (lo so un hack) In Safari il contenuto scuote molto quando ho scorrere, posso risolvere questo? (Voglio risolvere questo problema)

violino di lavoro ->https://jsfiddle.net/8oj0sge4/6/

var main = document.getElementById('main-site'); 
 
var maxTop = main.parentNode.scrollHeight - main.offsetHeight; 
 

 
main.parentNode.parentNode.onscroll = function() { 
 
    main.style.top = Math.min(this.scrollTop, maxTop) + "px"; 
 
}

#wrapper { 
 
    width: 100%; 
 
    height: 1500px; 
 
    border: 1px solid red; 
 
    padding-top: 380px; 
 
} 
 
#wrapper .container { 
 
    border: 1px solid green; 
 
    width: 100%; 
 
    height: 500px; 
 
    overflow: scroll; 
 
} 
 
#wrapper .container-scroll { 
 
    height: 1500px; 
 
    width: 100%; 
 
    border: 1px solid yellow; 
 
    position: relative; 
 
} 
 
#wrapper .main { 
 
    width: 200px; 
 
    height: 500px; 
 
    background: black; 
 
    overflow: scroll; 
 
    position: absolute; 
 
    color: white; 
 
    left: 50%; 
 
    margin-left: -100px; 
 
    margin-top: 10px; 
 
}

<div id="wrapper"> 
 
    <div class="container"> 
 
    <div class="container-scroll"> 
 
     <div id="main-site" class="main"> 
 
     My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot! 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Grazie ragazzi.

fonte

2015-04-16 Anonymous

Non pensi che il suo meglio se si inserisce (main-site) inisde il (contenitore) in modo da avere la libertà di scorrere all'interno (container-scroll) - Demo https://jsfiddle.net/ 17nbtg7q/ – Tasos

Nel fiddle si dice * quando il mouse si sposta su questo div in safari * ma presumo che si tratti di un adattamento per il tocco. Se questo è il caso, vedi se questo fa il trucco (o qualcosa di simile, non posso mettermi alla prova): https://jsfiddle.net/awLk2x8w/. – Shikkediel

Se si desidera che l'intera pagina scorra anche mentre si posiziona il cursore sui contenitori scorrevoli, in che modo gli utenti dovrebbero effettivamente scorrere all'interno dei contenitori scorrevoli? –

Non è sicuro al 100% cosa si sta ma è possibile ottenere la posizione fissa con css "fisso". Rimarrà dove lo metti. Il seguente css viene risolto nella parte inferiore della pagina.

.fixed { 
    bottom: 0; 
    left: 0; 
    position: fixed; 
    right: 0; 
    top: auto; 
}

C'è già una risposta su posizione di scorrimento: How to get scrollbar position with Javascript?

fonte

2015-04-16 23:08:34

Sono confuso, dove dovrei metterlo? –

si aggiunge solo questo js file per ottenere un effetto di scorrimento uniforme.

https://github.com/nathco/jQuery.scrollSpeed

deomo vivo

http://code.nath.co/scrollSpeed

fonte

2015-04-22 09:33:07

Non so importante è che i contenuti, e con questo voglio dire se ha bisogno di rimanere selezionabile.

Se non è un bel buona soluzione sarebbe quella di utilizzare #wrapper .main{ pointer-events: none; }, il che significa che il contenuto non avrà nessuna eventi da mouse e sarebbe passare attraverso di essa all'elemento successivo dietro di esso - nel tuo caso il rotolo andrebbe dirrectly a #wrapper .

fonte

2015-04-23 04:42:14

ma i pulsanti funzioneranno ?? –

Safari lo fa perché ogni browser ha il proprio scorrimento. Se hai un'intestazione fissa su un telefono agisce saltuariamente e se lo fai su un PC agisce normalmente. Explorer scorre liscio e Chrome scorre direttamente verso il luogo senza transizione graduale.

fonte

2015-04-23 17:29:47

Spero che questa demo ti aiuti a far scorrere il contenuto div al passaggio del mouse e quando il mouse esce dal div.

<html> 
</head> 
<style> 
.mydiv 
{height: 50px;width: 100px; overflow-y: scroll; } 
</style> 

<script> 
function loadpage() 
{ document.getElementById('marquee1').stop(); } 
function marqueenow() 
{ document.getElementById('marquee1').start(); } 
</script> 

</head> 
<body onload="loadpage()"> 
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()"  onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10"> 
This is my test content This is my test content This is my test content This  is my test content This is my test content This is my test content This is my  test 

content This is my test content This is my test content This is my test  content This is my test content This is my test content This is my test content  This is my test content This is my test content This is my test content 
</marquee> 
</body> 
</html>

fonte

2015-04-27 02:38:13

Il motivo per cui il tuo #main-site è "jiggling" è perché il browser di tenere "ridipingere" la posizione di questo elemento.

Un trucco per risolvere questo è chiamato Debounce Function, (è possibile anche google per vedere altre varianti.) L'idea di base è di ritardare lo scroll event handler per cancellare quei callback non bloccati.

Nel tuo caso, si può fare qualcosa di simile:

main.parentNode.parentNode.onscroll = function(event) { 
    debounce(offsetting, 10); 
} 

function offsetting() { 
    main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";  
} 

function debounce(method, delay) { 
    clearTimeout(method._tId); 
    method._tId= setTimeout(function(){ 
     method(); 
    }, delay); 
}

Se continuate a vedere il problema jiggling, si può semplicemente modificare il parametro di ritardo (cioè, cambiare da 10 a 50).Il rovescio della medaglia è che il tuo elemento #main-site sarà "tagliato fuori" per un po ', a seconda delle impostazioni del ritardo.

fonte

2015-04-27 09:47:00 kavare

Poiché il codice funziona perfettamente su Chrome e IE, potrebbe esserci un bug sull'attributo scrollHeight o offsetHeight su Safari. Vi consiglio di usare getBoundingClientRect per calcolare la posizione dell'elemento poiché questo metodo è più affidabile e preciso.

var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;

fonte

2015-04-27 11:29:23 Lewis

questo bloccherà il rotolo in safari Tresdin –

@AmandaFerrari No. Non lo farà. C'è un errore di battitura sul mio codice che potrebbe causare questo problema. L'ho già risolto – Lewis

Scorri un div quando ci si concentra su un div interno

risposta

Problemi correlati