절대 위치 및 스크롤 DIV

Question

가 I이 까다로운 CSS 문제가이 CSS와

<div id="wrapper"> 
    <div class="left"></div> 

    <div id="scroll"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus volutpat turpis at iaculis. Proin at nisl leo. Morbi nec blandit leo? Pellentesque interdum nunc sed nisl rhoncus gravida. Nunc sollicitudin, mi sit amet porta mollis, metus erat ornare odio, eu accumsan mauris diam nec augue. Ut tincidunt dui at lorem consequat vitae consectetur sapien pharetra. Suspendisse potenti. Donec turpis enim, varius accumsan congue vitae, rhoncus ut justo. Curabitur tristique lobortis eros ut pharetra. Maecenas non condimentum justo. Integer tincidunt; velit quis auctor varius, magna lorem pharetra urna, eget pellentesque leo nibh at mi. Ut pretium bibendum dui vel venenatis. Proin vel sem vitae lacus tincidunt bibendum. Pellentesque blandit mauris sit amet mauris sollicitudin pretium. In molestie condimentum nisi placerat consequat. 
    </div> 

    <div class="right"></div> 
</div> 

: I이 HTML이

:

#wrapper { 
    position: relative; 
    display: block; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    height: 47px; 
} 

#scroll { 
    position: relative; 
    height: 100%; 
    width: 10000px; 
} 

div.left, div.right { 
    position: absolute; 
    display: block; 
    background-color: rgba(255, 0, 0, 0.5); 
    width: 24px; 
    height: 100%; 
    z-index: 100; 
    top: 0; 
} 

div.left { 
    left: 0; 
} 

div.right { 
    right: 0; 
} 

그리고 시각적 결과는이 인

#scroll을 스크롤 할 때 어떤 이유로 인해 div.right이 움직입니다. 내가 항상 #wrapper의 경계에 뜨기를 원합니다. 여기

가 jsfiddle입니다 :

이

내가 지금 무엇을 얻을 http://jsfiddle.net/b5fYH/

감사합니다

편집

그것은 분명하지 않았다해서, 그것을 모바일 장치에서 작동해야합니다.

Answer 1

position: absolute과 position: fixed의 차이점을 알아야합니다.

첫 번째 의미는 요소를 상대적 요소 내에서 절대 위치에 배치하고 그 위치에 상대적으로 유지하는 것입니다.

둘째 : 절대 위치에있는 요소를 창 (프레임) 내에 배치하고 아무런 문제없이 그대로 둡니다.

확인이 바이올린 : http://jsfiddle.net/b5fYH/1/

Answer 2

문제는 오버 플로우-x는 래퍼 DIV의 폭을 변경하는 방법에있다.

은 내가 찾은 해결책은이었다

데모 : http://jsfiddle.net/5jWpG/

1. 은 다음과 CSS 코드를 추가 아이디 래퍼 컨테이너 다음

2. 로 새로운 사업부로 모든 것을 포장 :

   를

   #wrapper-container { 
       position: relative; 
   } 
   
   #wrapper { 
       position: static; /* or remove position relative from your code */ 
   } 
   
   div.left, div.right { 
       bottom: 16px; 
       height: auto; /* or remove height: 100% from your code */ 
   }