고정 사업부 내 코드에서 스크롤

Question

나는 다음과 같은 한 구조이어야한다 :

내 CSS는 다음과 같습니다

<div id="layerContentLayer"> 
    <div id="layerContentLayerHead"> 
     <img class="imageLogo" src="/img/logo.png"> 
    </div> 
    <div id="layerContentLayerBody"> 
     <div class="areaContentLayerText"> 
      <div class="contentItem" id="contentItem-99"> 
       <div class="contentItem-inner"> 
        <div class="head"></div> 
       </div> 
      </div> 
      <div class="areaContentForm"></div> 
     </div> 
    </div> 
</div> 

:이 거 링크를 클릭하여 열 수있는 계층이다

#containerContentLayer { 
    opacity: 1; 
    background: #FFF; 
    background-image: none; 
    background-repeat: repeat; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    top: 0; 
    left: 0; 
    position: fixed; 
    background-image: url('/img/Background_Contact.jpg'); 
    background-repeat: no-repeat 
} 
#layerContentLayer { 
    width: 1000px; 
    background-color: #f5f5f5; 
    margin: 50px auto 0 auto; 
} 

. 여기에는 입력 및 레이블이있는 연락처 양식과 모바일보기 (800px보다 작음)에서 none : 디스플레이에 설정된 배경 이미지가 있습니다.

이 구조로 웹 사이트를 열면 레이어가 열리지 만 스크롤하거나 스 와이프 할 수 없습니다. 휴대 전화 나 브라우저에서 사이트를 볼 때 문제가되지 않습니다.

오버플로 -y : scroll과 같은 다른 속성을 설정하는 것과 비슷하게 시도했지만 성공하지 못했습니다.

스크롤/스 와이프가 작동하는 코드를 변경해야하는 이유는 무엇입니까?

Answer 1

귀하의 요청을 정확하게 이해했기를 바랍니다. 먼저 브라우저가 스크롤 할 크기를 알 수 있도록 #layerContentLayer을 특정 높이로 설정해야합니다 (px, % 등). 두 번째로 overflow-y: scroll; (또는 auto ...)으로 설정해야합니다. https://jsfiddle.net/64z8ef30/