2014-12-02 7 views
0

중첩 된 구성 요소 및 관련 스크롤 막대와 관련하여 폴리머 사이트의 현재 레이아웃에 문제가 있습니다. 나는 절대적으로 아무런 의미가 없다고 말하면서 내가 CSS 전문가라고 소개합니다. 나는 아마 내가 이것만큼 어려움을 겪지 않았기 때문에 내가 그랬 으면 좋겠다. 또한 내 문제가 명백해질 수 있으므로 jsbin URL로 직접 이동하십시오.폴리머 중첩 코어 - 스캐 폴드 및 여러 수직 스크롤 막대/스크롤링 범위 문제

상황 :
현재 중첩 된 핵심 스캐 폴딩 요소가 있는데, 주요 내용의 경우 세로 스크롤이 필요한 경우가 많으므로 필요한 경우 세로 스크롤 막대가 활성화됩니다. 그러나 중첩되어 있으므로 컨테이너에 스크롤 막대를 사용할 수도 있습니다. 이상적으로는, 스캐 폴드의 내용을 전체 수직 범위로 스크롤 할 수있는 최상위 요소의 단일 스크롤 막대를 원하지만, 아래로 스크롤 할 때 상단 막대가 멀리 떨어지는 원인이됩니다. 나는 또한 비계의 주요 내용의 높이가로드 된 첫 번째 페이지에 의해 결정된다는 것을 알아 냈습니다. 높이가 다른 후속 페이지를로드해도 그에 따라 스크롤 막대 높이 범위가 변경되지는 않습니다.

이 jsbin 데모 목적으로 외부 콘텐츠를로드하는 iframe을 스 캐 폴드의 콘텐츠 섹션에 삽입했습니다. 내 실제 사이트는 콘텐츠 페이지 내에서 접을 수있는 높이 컨테이너로 데이터 묶음을로드하고 필요에 따라 가로로 배치합니다. 따라서 접을 수있는 페이지는 동적 높이를 갖습니다. 이 높이는 컨테이너 높이가 다양하기 때문에 페이지마다 다를 수 있습니다.

여기는 jsbin입니다. 누구든지이 CSS를 지옥에서 나를 제거 할 수있는 것은 나의 영웅 ...

내 초기 jsbin 샘플 코드에서 http://jsbin.com/muniqi/1/

+0

더 : https://groups.google.com/forum/#!topic/polymer-dev/iiVEXFm1JmM – sinjins

답변

0

간주됩니다, 당신은 내가 '100vh'최상위 레벨로 지정된 코어 페이지의 높이를 알 수 있습니다 폴리머 요소 (ie my-app-element). 제 2 수준의 폴리머 엘리먼트 (즉, 스캐 폴드 - 페이지 - 요소)는 전술 한 코어 페이지 내에로드된다. 따라서 중첩 된 발판 요소의 최대 높이는 100vh입니다. 체인을 더 내려가서 스캐 폴드 요소의 메인 컨텐츠 영역의 높이가 호스트의 높이 제한을 넘어서면 원래의 바깥 쪽 스크롤바와 다른 수직 범위를 갖는 보조 '내부'스크롤바가 나타납니다. 바깥 쪽 스크롤바 만이 내부 내용을 전체 수직 범위로 효과적으로 스크롤하지 못하기 때문에 내부 스크롤 막대를 사용하여 작업을 완료해야합니다. 못생긴 말은 하지마.

중첩 된 스캐 폴드 요소의 주요 콘텐츠 영역에 나타나는 내부 스크롤 막대의 가능성을 줄이는 한 가지 방법은 상위 요소의 핵심 페이지 높이를 100vh보다 훨씬 더 크게 변경하는 것입니다 (400vh ?). 이렇게하면 문제를 로터리 방식으로 해결할 수 있습니다. 이제 외부 스크롤 막대를 사용하여 내부 스크롤 막대가 발생하지 않고 중첩 된 비계 내용의 전체 수직 범위를 스크롤 할 수 있습니다.

새로운 jsbin 예제 (아래)에서 '수정'을 볼 수 있습니다.이 수정은 개별 구성 요소를 더 구성 가능한 방식으로 활용하는 것을 선호하는 대신 코어 - 스캐 폴드에 대한 의존도를 제거합니다. 이 폴리머 구글 그룹 스레드에서이 주제에 대한

http://jsbin.com/muniqi/3/