CSS 디스플레이 : 없음 및 tinyscrollbar 충돌

Question

개별적으로 보이는 부품으로 한 페이지 웹 사이트를 조정합니다. 예를 들어 "서비스"버튼을 누르면 다른 콘텐츠를 표시하지 않고 페이지의 해당 부분으로 이동합니다.

서비스 부분에는 스크롤바가 필요합니다. tinyscrollbar를 사용하고 있습니다.

#services { width:1100px; height:440px; bottom:0; position:absolute; top:60px; display:none; } 

표시시 : 없음이 포함되어 있으면 스크롤바가 작동하지 않습니다. 표시되지만 표시 줄을 스크롤 할 수 없습니다. display : none을 제거하면 스크롤 막대가 작동하지만 레이아웃이 완전히 덩치가 커집니다. 서비스 내용 (세 번째 메뉴 항목)은 첫 번째 방문시 첫 번째 메뉴 항목의 내용과 혼합되어 표시됩니다. 이것은 처음 방문했을 때입니다. 메뉴 사용 후 문제는 없어지고 레이아웃은 다시 정상입니다.

어떻게 해결할 수 있는지 알 수 없습니다.

도와주세요.

감사합니다.

p.s. 나는 지금 웹 사이트를 온라인으로 만들 수 없다. 나는 스크린 샷을 추가했다. deleted display:noneadded display:none 첫 번째 스크린 샷은 스크롤 가능한 스크롤바를 표시하지만 두 번째 스크린 샷은 스크롤 할 수없는 스크롤바를 표시합니다. 문제는 웹 사이트를 입력 할 때만 나타납니다. 버튼을 밀면 문제가 사라집니다.

p.p.s. 문제를 보시고 여기를보십시오. 나는 웹 사이트를 업로드 :

Answer 1

test.iwebs.ws 당신은 가시성을 정의 할 수 있습니다 : 없음 : 대신 표시 의 숨겨진.

가시성 : 숨김은 요소를 숨기지 만 여전히 레이아웃에서 공간을 차지합니다.

디스플레이 : 없음은 요소를 문서에서 완전히 제거합니다. HTML은 여전히 ​​소스 코드에 있지만 공간을 차지하지 않습니다.

Answer 2

인 경우 div 표시 후 tinyscrollbar_update() 함수를 사용해야합니다. none; 페이지로드시

var scrollbar = $('#services'); 
scrollbar.tinyscrollbar(); 

$('#services').show(); 

scrollbar.tinyscrollbar_update();