div에 연결된 세로 스크롤 막대를 스크롤 할 수 없습니다

div에 연결된 웹킷 스크롤 막대가 있습니다. body 요소에서 overflow 속성을 hidden으로 설정하여 기본 스크롤 막대를 비활성화했습니다. div에 붙어있는 스크롤바를 볼 수는 있지만 엄지 손가락을 볼 수 없으므로 스크롤 할 수 없습니다. 스크롤바가 연결된 div에는 id = "container"가 있습니다. 여기에 CSS가 있습니다 -div에 연결된 세로 스크롤 막대를 스크롤 할 수 없습니다

html 
{ 
}  
body 
{ 
    overflow-y:hidden; 
    overflow-x:hidden; 
} 

#container 
{ 
    height:100%; 
    overflow-x:hidden; 
    overflow-y:scroll; 
} 

#Title 
{ 

    padding-bottom: 10px; 
} 

table 
{ 
    width: 100%; 
    table-layout: fixed; 
} 

#container::-webkit-scrollbar 
{ 
    background: transparent; 
    width: 12px; 
} 

#container::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(10,11,12,0.3); 
    /* border-radius: 10px; */ 
} 

#container::-webkit-scrollbar-thumb 
{ 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background:rgba(104,102,102,0.8); 
}

컨테이너는 div (id = "Title")와 표를 호스팅합니다. 표에는 많은 콘텐츠가 있으므로 스크롤해야합니다.하지만 불행히도 그렇지 않습니다. 누군가 내가 뭘 잘못하고 있는지 지적 할 수 있다면 좋을 것입니다. 감사!

편집 : html로 추가 - 당신의 #container 100 %의 높이를 가지고 있기 때문에

<body> 
<div id="container"> 
<div id="Title"> 
    <span id="Heading_part_1">abc</span> 
    <span id="Heading_part_2">xyz</span> 
    <span id="Heading_part_3">pqr</span> 
    <span id="Timestamp"></span> 
    <span id="WrenchIconContainer" onclick="togglemenu();"> 
     <input type="image" src="res/wrench-arrow-icon.png" width="18px" height="18px"/> 
    </span> 
    <div id="menu_container" style="display:none"> 
     <p id="id1">sfdf</p><p id="id2" onclick="dosomething();">ffsdf</p> 
    </div> 
</div> 
<table id="table1" cellspacing="0" width="auto"> 
<thead> 
<tr> 
    <th id = "headline" width="85%"></th> 
    <th id = "storytime" width="15%"></th> 
</tr> 
    </thead> 
<tbody> 
</tbody> 
</table> 
</div> 
</body>

출처

2012-09-12 Tejas

HTML 파일도 살펴볼 수 있습니까? –

[나를 위해 일한다] (http://jsfiddle.net/crowjonah/FFMxb/) – crowjonah

을 스크롤 "엄지 손가락"컨테이너 내용의 전체를 맞게 실제로 충분히 크기 때문에 표시 할 이유가 없다 . 고정 된 픽셀 높이를 지정하면 "엄지 손가락"이 나타나 아름답게 작동합니다. Here's an example.

당신이 또 다른 래퍼 컨테이너를 포장하고 position: relative; 당신이 100 % 높이로 컨테이너를 남길 수 있습니다 제공,하지만 당신이 정말로하려는 것은 대체 주요 인 경우

position: absolute; 
top: 0; 
left: 0;

를 추가하는 경우 페이지의 브라우저 스크롤 막대를 사용하면 ::-webkit-scrollbar, ::-webkit-scrollbar-track 및 ::-webkit-scrollbar-thumb 선택 자의 본문으로 #container을 바꿉니다.

출처

2012-09-12 21:27:23 crowjonah

고마워요! 매력처럼 작동합니다. – Tejas

후속 질문이 있습니다. 나는 실제로 부모 div 아래에 호스팅 될 iframe 내부에서이 웹 페이지를 사용하고 있습니다. 이 특정 부모 div는 런타임에 지속적으로 크기가 조절됩니다. 그래서 컨테이너 div의 고정 된 고정 높이를 픽셀 단위로 유지할 수 없습니다. 이러한 시나리오에서이 작업을 수행하는 방법에 대한 지침이 있습니까? iframe을 호스팅하는 부모의 크기 조정에 따라 런타임시 컨테이너 높이를 수정하는 것만으로는 효과가 없습니다. – Tejas

div에 연결된 세로 스크롤 막대를 스크롤 할 수 없습니다

답변

관련 문제