오버플로 - y를 얻을 수 없습니다 : 작동하도록 스크롤

Question

세로 타임 라인을 만들려고하는데 overflow-y: scroll이 작동하지 않는 것 같습니다.

http://fosterinnovationculture.com/infographic/index.html

부모 DIV가 overflow: hidden이 있지만 자식 DIV 오버 플로우-Y를 가지고 : 여기에 웹 사이트에 대한 링크입니다. 상위 div를 제거하면 제대로 작동하지만 list.js 플러그인이 제대로 작동하려면 div 안에 필요합니다.

Answer 1

내가 코드를

HTML을 참조 몸 { 오버 플로우 : 숨겨진; }

// 전체 화면 만 의미하며 모든 오버플로가 숨겨져 있습니다.

.scroll에서 최대 높이를 설정해야합니다. 나는 해결책을 제안한다.

. 스크롤 ( 최대 높이 : 90vh; 당신은 100vh하고 hidden에 오버 플로우 속성 값의 설정 body의 높이를 고정

Answer 2

}; body의 높이가 무엇이든 관계없이 스크롤하지 않습니다.

본문의 오버플로 속성을 auto으로 변경하면 스크롤이 작동합니다.

top_nav의 position을 fixed으로 변경하면 검색 창을 항상 맨 위에 유지할 수 있습니다.

Answer 3

동일한 질문을 반복하는 것처럼 보입니다. 여기에 you asking about 같은 문제가 있습니다 (비록 제가 변경된 질문이기 때문에 다른 것입니다). 이 질문에 대한 답변은 my answer입니다.

---

답을주기 전에, 내가 말할 것이다 CSS를 코딩하는 경우 나 자신에게 가장 중요한 것은 : 다음 나는 그것이 너무 복잡하게하고 해킹하는 것을 시작하는 경우.

그런 다음 코드에서 overflow: hidden;의 모든 인스턴스를 제거하여 시작하십시오.

그리고 거기에이 얻을 : 이런 경우에

.top-nav { 
    height: 70px; /* you already specify this on your site */ 
} 
.scroll { 
    position: absolute; 
    top: 70px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    overflow-y: scroll; 
} 

---

, 당신은 귀하의 질문에 일반적이고 다른 사람이하기 전에 질문을해야합니다 디자인과 관련하여 실현하려고한다. 이러한 질문에 대한 답을 찾을 수 없다면 검색 키워드를 다시 생각해 보는 것이 좋습니다.

"how-to"디자인 질문에 대한 답변은 a Stack Overflow question입니다.