html 5: Beenden des übergeordneten Bildlaufs, wenn die Maus über div bewegt wird

Das Scroll-Attribut wird in HTML5 nicht unterstützt. Ich habe eine Svg in einem iframe in einem div, wie verwende ich die Bildlauffunktion innerhalb der div und stoppen Sie die Seite blättern gleichzeitig mit HML 5?html 5: Beenden des übergeordneten Bildlaufs, wenn die Maus über div bewegt wird

Ich habe versucht, Lösungen wie

mouseWheelEvent.cancelBubble = true;

und

$('#svgDiv').bind('mousewheel DOMMouseScroll', function(e) { 
    var scrollTo = null; 

    if (e.type == 'mousewheel') { 
     scrollTo = (e.originalEvent.wheelDelta * -1); 
    } 
    else if (e.type == 'DOMMouseScroll') { 
     scrollTo = 40 * e.originalEvent.detail; 
    } 

    if (scrollTo) { 
     e.preventDefault(); 
     $(this).scrollTop(scrollTo + $(this).scrollTop()); 
    } 
});

aber nichts funktioniert. Bitte helfen Sie.

Quelle

2016-08-30 P.Ellis

Ich denke, dass Verhalten mit CSS getan werden konnte. Die Idee ist, das Elternteil kleiner als das Kind und geben Sie es Stil Überlauf: scrollen.

Sie können die Bildlaufausrichtung mithilfe der Eigenschaften Überlauf-y für vertikales Scrollen und Überlauf-x für horizontales Scrollen angeben.

.child{ 
 

 
    background: goldenrod; 
 
} 
 

 
.parent{ 
 
    overflow-y: scroll; 
 
    width: 220px; 
 
    height: 200px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="parent"> 
 
     <div class="child"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae orci in libero iaculis bibendum vel at velit. Etiam ornare ex urna, quis tristique dui finibus a. Suspendisse potenti. Aliquam scelerisque nibh ipsum, vestibulum suscipit purus eleifend a. Phasellus dictum venenatis velit, ac ultrices tellus finibus et. Cras elit nulla, facilisis non imperdiet et, rhoncus volutpat nisl. Donec id magna elementum ex cursus mollis. 
 

 
Nullam facilisis non nibh ut pharetra. Aenean et maximus nulla. Curabitur dignissim nunc in arcu porta, et imperdiet sem maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus fermentum rhoncus sem eget pharetra. Nulla augue ipsum, condimentum et orci sit amet, ultricies dictum nunc. Donec porta lacus at tristique vestibulum. Cras et nibh enim. Mauris sagittis risus et orci tristique, vitae laoreet ante efficitur. Cras ut lectus orci. Mauris blandit, neque eu convallis lobortis, nisi est viverra sapien, et maximus lectus nisi ut quam. Ut eget accumsan elit. Nulla odio urna, tempus id leo sed, dictum facilisis dolor. 
 

 
Cras aliquam massa vitae venenatis facilisis. In nec leo at dolor tincidunt sollicitudin eu tempor tortor. Proin lectus lorem, consectetur non ipsum vel, accumsan iaculis mauris. Aenean neque elit, ullamcorper quis aliquet id, tempor ut turpis. Aenean tortor ligula, congue et elit non, consequat accumsan nulla. Mauris eros mi, varius sit amet facilisis non, molestie a lacus. Nam at risus nisl. Morbi nunc turpis, pulvinar quis tortor eu, fermentum vulputate tellus. Pellentesque consectetur efficitur diam non interdum. Sed suscipit ligula sed turpis gravida, semper aliquam elit semper. 
 

 
In magna ex, lacinia sed semper id, rutrum at turpis. Phasellus metus urna, aliquam ac euismod ut, varius vitae eros. Phasellus laoreet velit dolor, vitae volutpat nisl lobortis eu. Quisque id venenatis ante. Duis placerat eu risus non fringilla. Duis eu orci a felis lobortis venenatis at in mauris. Maecenas nulla lorem, laoreet nec massa ac, venenatis egestas magna. 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

ich einen plunker für Ihr Problem gemacht haben hoffe ich, dass Ihnen helfen. Viel Glück

Quelle

2016-08-30 14:35:59

danke für die Hilfe @Syam Ich bin ziemlich neu zu Stackoverflow –

html 5: Beenden des übergeordneten Bildlaufs, wenn die Maus über div bewegt wird

Antwort

Verwandte Themen