2012-03-10 1 views
9

어쩌면 이것은 쉬운 수정 일 수 있습니다. 그러나 오랫동안 나를 미치게 만들었 기 때문에 결국 솔루션이 있는지 확인하기로 결정했습니다.Vertical Scrollbar가 아직 나타나지 않은 경우이를 보완하는 방법

간단히 말하면, 대부분의 웹 페이지를 넓은보기 포트에 배치합니다.

예를 들어,보기 포트는 1028px 일 수 있으며 내 페이지 너비는 960px가되어야합니다.

그래서 내 CSS는 다음과 같습니다

#pageWrapper { /* page width is 960 pixels */ 
    margin:0 auto; 
    width:960px; 
} 

그게 문제가 없습니다.

높이보다 짧은 동적 페이지를 시작한 다음 내 페이지가 화면 맨 아래로 확장되어 (jQuery slideOut 등을 통해) 세로 스크롤 막대가 나타나게 할 때 문제가 발생합니다.

결국 slideOut 중에 페이지가 깜박이고 slideIn 중에 오른쪽으로 깜박입니다.

CSS를 통해 오른쪽 여백을 20px로 설정하고 여전히 margin:0 auto;을 활용하는 방법이 있습니까?

감사합니다.

+0

'html' 또는'body' 요소에'overflow-y : scroll'을 사용해 볼 수는 있습니다. 그러나 이것이 작동하는지 확실하지 않습니다. 동시에 3 줄의 javascript/jquery를 사용하여이 작업을 수행 한 다음이 함수를 onresize 이벤트에 연결할 수 있어야합니다. –

+0

또 다른 방법은 스크롤 막대가 항상 존재하도록하는 것입니다. 이 작업을 수행하는 CSS 옵션이 있지만 그 기능을 기억하지 못합니다. –

+0

@ErickPetru 아니, 그게 아니야. –

답변

7

페이지의 내용이 더 이상 수직으로 들어 가지 않으면 브라우저가 창의 오른쪽에 스크롤 막대를 추가합니다. 이렇게하면 브라우저 창의 사용 가능한 너비가 변경되므로 창의 오른쪽에 상대적으로 가운데 맞춤 또는 위치가 지정된 콘텐츠는 왼쪽으로 이동합니다. 이것은 매우 일반적입니다.

제어 방법은 여러 가지가 있지만 가장 일반적인 방법은 스크롤 막대가 있거나 스크롤 막대를 사용하지 않으려면 창에서 overflow-y 속성을 제어하는 ​​것입니다.

설정 overflow-y: scroll은 스크롤바가 항상 존재하도록합니다.

설정 overflow-y: hidden은 스크롤바가 없도록합니다.

+0

그래, 고마워요 @ 잭 클리퍼. –

1

NB : overflow-y: hidden은 사용자가 어떤 방향으로 스크롤하지 못하도록하여 아래쪽 뷰포트 아래의 모든 콘텐츠를 효과적으로 액세스 할 수 없도록합니다.

관련 문제