{position : absolute; 오른쪽 : 0px; }

오른쪽에있는 iframe의 요소를 정렬하고 iframe에 가로 스크롤 막대를 활성화해야합니다. 고장, 수평;{position : absolute; 오른쪽 : 0px; }

<html> 
    <body> 
     <div> 
      <table> 
       <tr> 
        <td>lorem ipsum here</td> 
        <td>lorem ipsum here</td> 
        <td>lorem ipsum here</td> 
        <td>lorem ipsum here</td> 
        <td>lorem ipsum here</td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

html{ 
    overflow:scroll; 
} 
table{ 
    position: absolute; 
    left: 0px; 
} 
td { 
    white-space: nowrap; 
    border: 1px solid black; 
}

(0 픽셀 오른쪽) 바로 위치와 동일한 CSS는 :

(iframe을에서) 다음 코드는 왼쪽 위치와 함께 완벽하게 작동 스크롤 바가 활성화되지 않습니다.

편집 : 수평 스크롤

EDIT2 :이 HTML 비트는 iframe에있다

EDIT3 :. 흥미롭게도 document.getElementById를 ('TABLEID') scrollWidth는 가지고 있어야 scrollWidth 스크롤에 대한 정확한 정보를 제공하지만,하지 표시되지 않습니다. 내 문제에 추한 못생긴 수정을 시도 할 수도 있습니다 (즉, 인공 스크롤 바 fml 생성)

출처

2011-10-20 BenoitParis

예. 어떤 브라우저를 사용하고 있습니까? – scottheckel

@Hexxagonal html이 iframe에 있음을 추가하는 것을 잊어 버렸습니다. 이 경우 FF 5와 Chrome 15에서 모두 작동하지 않습니다. – BenoitParis

발생하는 문제가 재현 되나요? - http://jsfiddle.net/ULnWF/1/ –

스크롤 막대를 가져 오려면 테이블이 플로우에 나타나야합니다. position을 absolute으로 변경하면 흐름에서 벗어 났으므로 수치 계산을위한 JavaScript가 필요하지 않습니다 (그렇게하지 마십시오 !) 할 수 없습니다.

내가 원하는 것은 페이지의 여백을 제거하는 것입니다. 이것이 올 바르면 스타일 body { padding: 0; }을 넣은 다음 에서 과 left을 제거하십시오.

또한 스크롤하려는 경우 iframe을 사용하지 않아도됩니다 (iframe을 사용하지 않는 것이 바람직하지 않음). 용기상의 overflow: scroll이면 충분하다.

달성하려는 내용에 대한보다 완벽한 데모를 게시 할 수 있다면보다 정확한 조언을 제공 할 수 있습니다.

출처

2011-10-20 12:52:33

도메인이 다르므로 iframe을 사용해야합니다. 다행스럽게도 두 도메인을 모두 제어합니다 (병합은 불가능합니다). 이 페이지의 오른쪽 하단 영역에서 활성화 된 가로 스크롤 막대를 가지고 싶습니다. http://jsfiddle.net/ULnWF/1/ – BenoitParis

@BenoitParis : iframe을 완전히 포함 할 최소 크기로 만들려면 그것의 내용, 마치 스팬이나 그런가? 내가 알고있는 어떤 방식으로도 할 수 없다는 것입니다 (다른 도메인에 있기 때문에 JavaScript의 크기를 수동으로 변경하기 위해 크기를 바깥쪽으로보고 할 수 없습니다).AJAXy 방식으로 가져올 수 있다면 (크로스 사이트 요청 문제가 발생 함) 인라인으로 포함하면 해당 작업을 수행 할 수있는 유일한 방법입니다. –

내 의도를 올바르게 읽고, iframe 크기를 적용하기 위해 스크롤 막대 너비를 사용하고 싶습니다. 실제로 브라우저 확장을 통해이 작업을 수행하므로 통과하는 것이 더 쉽습니다. 지금 작동합니다 : D – BenoitParis

{position : absolute; 오른쪽 : 0px; }

답변

관련 문제