html 5 : div 위로 마우스를 가져 가면 상위 스크롤 중지

스크롤 속성은 HTML5에서 지원되지 않습니다. div의 iframe 안에 svg가 있습니다. div 안에 스크롤을 사용하고 HML 5와 동시에 페이지 스크롤을 중지하려면 어떻게해야합니까?html 5 : div 위로 마우스를 가져 가면 상위 스크롤 중지

나는

mouseWheelEvent.cancelBubble = true;

및

$('#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()); 
    } 
});

하지만 아무것도 작동하지 않습니다 같은 솔루션을 시도했다. 도와주세요.

출처

2016-08-30 P.Ellis

나는 행동이 CSS를 사용하여 수행 할 수 있다고 생각합니다. 아이디어는 부모보다 작은 자식을 유지하고 스타일 오버플로 : 스크롤을 제공하는 것입니다.

세로 스크롤의 경우 property overflow-y를 사용하고 가로 스크롤의 경우 overflow-x를 사용하여 스크롤 방향을 지정할 수 있습니다. 나는 당신의 문제에 대한 plunker을 한

.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>

는 나는 당신을 도움이되기를 바랍니다. 행운을 빌어 요

출처

2016-08-30 14:35:59

덕분에 도움이 @Syam 나는 꽤 stackoverflow에 새로운거야 –

html 5 : div 위로 마우스를 가져 가면 상위 스크롤 중지

답변

관련 문제