글
Scroll Down 화면 만들기
스크롤 다운 화면 만들시 상단 view 고정 시켜야하는데 보통 stickyHeaderIndices={ [ number ] } 로 고정시킨다.
다만 ScrollView에서 stickyHeaderIndices로 고정하면서 Animated.View로 height, ... 애니메이션 효과 주려할때
'stickyHeaderIndices style property height is not supported by native animated module' 에러가 발생하면서 애니메이션 효과를 줄수가 없다.
솔루션 코드는 여기에 있다. - https://gist.github.com/BoBinLee/76f13317e135adc16a7eae42fe4aab7e
해결방법은 간단하다.
View를 한번더 감싸고 감싼 View style={{ height: 1 }}을 주면 끝.
원하는 방식대로 동작하는 것을 확인할 수 있다.
글
푸터 하단 고정 시키기
html, body { height: 100%; }
footer { positive: absolute; bottom: 0; }
footer감싸고 있는 wrapper { positive: relatvie; min-height: 100%; }
<body>
<div class="wrapper">
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
</body>
기본적으로 이렇게하면 적용된다.
div 깊이가 있을 경우
<div class="depth-2-wrapper">
<div class="wrapper">
...
</div>
</div>
depth-2-wrapper height: 100% 로 유지시켜줘야한다.
'H > Html' 카테고리의 다른 글
| IOS Safari minimal-ui 적용기 (0) | 2017.10.15 |
|---|---|
| CSS float 요소 중앙 정렬 시키기 (0) | 2015.01.10 |
| 크기에 따른 가로 스크롤 div 생성 (0) | 2015.01.09 |
| HTML: How to make a submit button with text + image in it? (0) | 2014.06.23 |
| parent.location 해당 a name 으로 이동 (0) | 2014.03.19 |
글
IOS Safari minimal-ui 적용기
IOS Safari 브라우져에서 제공하는 minimal-ui 기능 ( 툴바가 쪼그라드는 기능 or 툴바 사라짐 기능 )을 사용하기 위해 몇가지 수정사항이 존재하였다.
경험을 토대로 설명하고자 한다.
- <meta name="viewport" content="minimal-ui"> minimal-ui 추가한다.
- body { height: 100%; overflow: auto 혹은 scroll; }을 명시하여 body에서 스크롤이 가능하면 끝.
이때 주의해야할 점은 하의 div들 중 { overflow: auto, scroll; } 이 가능하면 해당 엘리멘트가 스크롤 되기 때문에 위 minimal-ui 기능이 동작하지 않는다.
즉, window.addEventListener('scroll', this.onScroll); 추가 시 해당 스크롤이 동작하면 된다.
위 두가지 조건이 만족하면 safari에서 툴바가 쪼그라드는걸 볼 수 있다.
참고
https://stackoverflow.com/questions/18793072/impossible-to-hide-navigation-bars-in-safari-ios-7-for-iphone-ipod-touch
'H > Html' 카테고리의 다른 글
| 푸터 하단 고정 시키기 (0) | 2017.10.15 |
|---|---|
| CSS float 요소 중앙 정렬 시키기 (0) | 2015.01.10 |
| 크기에 따른 가로 스크롤 div 생성 (0) | 2015.01.09 |
| HTML: How to make a submit button with text + image in it? (0) | 2014.06.23 |
| parent.location 해당 a name 으로 이동 (0) | 2014.03.19 |
