[Ionic]ion-content의 스크롤을 중지하는 방법

4950 단어 HTMLCSSionic
ion-content는, ion-header, ion-footer의 height를 고려해 표시 영역을 조정해, 게다가 scroll 설정까지 붙입니다. 매우 편리합니다.
하지만, 스크롤하고 싶지 않은 화면이 나왔을 때, 멈추는 방법을 몰랐습니다. 그래서 공식 포럼이라든지 StackOverflow라든지에서 scroll을 멈추는 방법을 조사하면 여러가지 있었으므로 정리합니다.

사적인 결론



no-bounce를 사용하는 것이 좋을 것 같습니다.

ion-content 사용하지 않음



ion-header도 ion-footer도 없는 것 같은 페이지라면 원래 ion-content를 사용하지 않는 것도 있다고 생각합니다.
<div class="fullscreen">
</div>
.fullscreen{
    background-color: #fff;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
}

그러나 이 경우 페이지 전환 시 ion-navbar에 자동으로 '뒤로 버튼'이 표시되는 이점이 없으므로 직접 뒤로 버튼을 배치해야 합니다.

또한 ion-header, ion-footer를 붙인 경우 ion-content와 같이 표시 영역의 자동 조정이 없기 때문에 padding 등으로 div 태그 내의 요소와 ion-header, ion-footer가 쓰이지 않도록 조정해야 할 것 같습니다.

CSS로 중지



CSS에서 ion-content의 scroll 설정을 중지하는 방법입니다. 구체적으로는 아래의 코드와 같은 느낌입니다.
.scroll-content{
    overflow: hidden;
}

다만, scroll-content 라고 하는 클래스명은, ion-scroll에도 사용되고 있는 것 같기 때문에, 그쪽도 스크롤 할 수 없게 됩니다. ion-scroll 사용하지 않는다면 이 방법으로도 좋을지도 모릅니다.

ion-fixed로 멈추다



StackOverflow에서 보았습니다. ion-fixed를 붙인 div 태그로 둘러싸는 방법입니다. 이 방법이라면 ion-header, ion-footer를 붙였을 때의 사이즈 자동 조정의 혜택을 받으면서 스크롤을 멈출 수 있다고 생각합니다.
<ion-content>
    <div ion-fixed>     
    </div>
</ion-content>

그건 그렇고, Chrome에서 ion-fixed 내용을 보면 아래 CSS가 적용되었습니다.
.fixed-content{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    display: block;
}

한층 더 보면(자) ion-fixed는 자동적으로 fixed-content내에 부하되는 것 같고, 고정하고 싶은 영역과 스크롤하고 싶은 영역을 간편하게 나눌 수가 있는 것 같습니다.
<ion-content>
    <div ion-fixed>
     test1← fixed-content内      
    </div>
    <div>
    test ← scroll-content内
    </div>
</ion-content>

참고 이미지


요약



나는 지금까지 ion-content 사용하지 않는 & CSS로 멈추는 방법을 사용해 왔습니다만, 이번 조사해 보아 그 밖에도 방법이 있는 것을 알았으므로 이번, 실천에서도 사용해 보자고 생각합니다.

번외편? no-bounce



처음으로 그 존재를 알았지만 ion-content에 no-bounce를 붙이는 방법도있을 것 같습니다.
이 속성을 붙이면, ion-content의 표시 영역내라면 스크롤 하지 않는다. 표시 영역을 넘으면 스크롤하게 된다는 동작이 됩니다.
<ion-content no-bounce>
</ion-content>

엄밀하게는, scroll을 멈추고 있는 것은 아니기 때문에, 번외편으로 했습니다만, 스크롤을 멈추고 싶은 유스 케이스의 대부분은 iOS의 바운스 스크롤이 원인이라고 생각하기 때문에, 이것이 제일 좋지 않을까 하는 생각이 합니다.

좋은 웹페이지 즐겨찾기