고정 구역으로 스크롤하는 것을 어떻게 제한합니까?

Question

다음과 같이 나는 구성이 개 된 div를 가지고 :

외부, 컨테이너 사업부는 매우 큰 높이를 (이 단순히 내용의 많은 부모 DIV에있어 실제 시나리오를 에뮬레이션 의미가

<div id="container"> 
    <div id="inner"></div> 
</div> 

). 내부 div는 정의 된 높이를 가진 고정 된 위치 div입니다. Overflow-y는 내부 div에 설정되어 사람들이 정의 된 높이 내에 들어 가지 않는 내용을 볼 수 있습니다. http://codepen.io/anon/pen/myVxar

방법은 내가 그런 당신이 내부 사업부를 스크롤 할 때, 외부 DIV 가 수행하지 않는 것이 스크롤을 설정합니까 : 여기

은 codepen입니까? 즉, 내부 div 내에서 스크롤하면 외부 div를 스크롤해서는 안됩니다.

CSS/HTML을 사용하여이를 수행 할 수있는 방법이 있습니까? 그렇지 않다면 Javascript/Jquery를 사용하여 어떻게 처리할까요?

Answer 1

당신은 페이지의 스크롤을 사용하지 않도록 설정할 수 있지만 마우스 휠 이벤트를 비활성화 할 수 있습니다

편집 : 실제 세계에서 실행하고 있고 프런트 엔드 코드를 완전히 제어 할 수 있다면 전략이 맞는지 다시 생각해 봐야합니다. 가장 확실한 방법이 있기 때문입니다.

function preventDefault(e) { 
    e = e || window.event; 
    if (e.preventDefault) 
     e.preventDefault(); 
    e.returnValue = false; 
} 

function wheel(e) { 
    preventDefault(e) 
} 
// bind some scroll functionality to the inner div 

$('#inner').on('scroll', function(e){ 
    var elem = $(e.currentTarget); 
    // check if user has scrolled to bottom 
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()){ 
     // disable mouse scroll event 
     if (window.addEventListener) { 
      window.addEventListener('DOMMouseScroll', wheel, false); 
     } 
     window.onmousewheel = document.onmousewheel = wheel; 
     console.log('done') 
    } else{ 
     // remove the event that disables scroll 
     if (window.removeEventListener) { 
     window.removeEventListener('DOMMouseScroll', wheel, false); 
     } 
     window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
    } 
}); 
// remove the event that disabled scroll if user mouse leaves inner container 
$('#inner').mouseout(function(e){ 
    if (window.removeEventListener) { 
     window.removeEventListener('DOMMouseScroll', wheel, false); 
     } 
     window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
}) 

Answer 2

왜이 접근법을 사용하고 있는지 궁금합니다. 콘텐츠가 길 경우를 대비해 큰 키를 설정할 수도 있지만 이처럼 뭔가를하지 않는 이유는 무엇입니까?

#container { 
    height:200px; 
    width:300px; 
    overflow:scroll; 
    border:1px solid; 
} 

내부 내용이 컨테이너에서 오버플로되면 컨테이너가 스크롤됩니다. 즉, .inner에는 스크롤과 관련된 스타일링이 필요하지 않습니다. 내가 뭔가를 놓친 경우 자세한 내용을 게시하십시오. 내부 DIV 항상 다른 내용을 포함하지 않는 것으로 가정

Answer 3

... 당신은 내부 사업부 보여줄 때 그냥 컨테이너의 높이와 오버 플로우를 조절할 수 :

Working Example

$('#container').click(function() { 
 
    if ($('#inner').is(':visible')) { 
 
     $('#inner').fadeOut('slow'); 
 
     $('#container').css({ 
 
      height: 14000, 
 
      overflow: 'auto' 
 
     }); 
 
    } else { 
 
     $('#inner').fadeIn('slow', function() { 
 
      $('#container').css({ 
 
       height: "100%", 
 
       overflow: 'hidden' 
 
      }); 
 
     }); 
 
    } 
 
});

#container { 
 
    height: 14000px; 
 
    width: 100%; 
 
} 
 
#inner { 
 
    display:none; 
 
    background: #fff; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100vh; 
 
    width: 100%; 
 
    overflow-y: scroll; 
 
    box-sizing: border-box; 
 
    padding: 15px; 
 
    font-size: 18px; 
 
    color: #808080; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container">click Me! 
 
    <div id="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat mauris at consequat rutrum. Nam ut tempus nisl, quis luctus turpis. In eu dolor a ligula rhoncus convallis a in lectus. Cras pretium felis in justo semper convallis. Integer nisl arcu, venenatis sed odio in, accumsan consectetur mi. Sed fermentum tempus elit at varius. Proin scelerisque auctor nibh quis lobortis. Aliquam enim elit, rhoncus at ultricies a, rutrum id ipsum. Morbi eu justo id mi accumsan ullamcorper at eget risus. Curabitur elementum ultrices ex, sit amet laoreet orci. Proin lobortis quis lacus quis tristique. Nulla facilisi. Quisque vel libero quis lectus convallis volutpat. Sed ullamcorper luctus neque, id efficitur eros fermentum id. Fusce et nulla faucibus, faucibus ante id, pellentesque erat. Quisque ac feugiat nisi, eget feugiat nulla. Morbi quis interdum tellus. Etiam porttitor lacus ac orci rhoncus, eu commodo lacus tempus. Aliquam finibus egestas leo eget efficitur. Duis maximus tincidunt lorem, eu convallis ipsum feugiat lobortis. Proin auctor volutpat velit, ac suscipit neque vestibulum sed. Suspendisse pretium, libero sit amet euismod imperdiet, risus nulla sodales mi, luctus imperdiet enim augue at odio. Suspendisse mollis, eros quis malesuada feugiat, mi libero elementum odio, eu scelerisque elit nibh quis ante. Sed malesuada porttitor dui in volutpat. Praesent consequat nisi vel ipsum bibendum, at mollis nibh congue. Cras vitae turpis aliquet, sollicitudin libero ut, fringilla ex. In leo sem, mollis et quam eget, cursus laoreet quam. Fusce pulvinar felis eu finibus venenatis. Integer quis mauris commodo, sollicitudin mi ullamcorper, hendrerit justo. Donec luctus ultrices ante. Curabitur eget neque eu augue mattis elementum a vel ante. Aliquam posuere augue ac velit bibendum, ut efficitur mi convallis. Curabitur velit tellus, facilisis vel elit at, ornare scelerisque massa. Donec rhoncus eget diam non tincidunt. Ut in sapien sapien. Mauris ultricies est ut facilisis mollis. Duis finibus malesuada mollis. Praesent ultricies lectus sed dolor pellentesque, ac volutpat ipsum maximus. Donec risus nulla, accumsan vel orci sit amet, tristique rhoncus diam. Praesent malesuada tincidunt placerat. Proin at congue odio. Sed ac velit quis risus aliquet consectetur at sit amet magna. Fusce quis lacinia elit, eget tincidunt libero. Donec ac elit vel lacus iaculis aliquet vitae ut purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum mauris ipsum, at laoreet odio sodales at. Vestibulum in ex tellus. Proin non varius ligula, nec ultricies ligula. Praesent quis lacus at augue tristique faucibus. Quisque eleifend eu magna sed fermentum. Phasellus ac mattis erat. Donec pharetra nunc eget facilisis condimentum. Etiam sagittis tempus sapien, id malesuada felis pretium eu. Aenean hendrerit nec velit at euismod. Pellentesque at maximus risus, sed eleifend nisi. Sed quis interdum orci. Donec vel nisl malesuada, interdum felis at, porttitor odio.</div> 
 
</div>

을