[Ionic]ion-content의 스크롤을 중지하는 방법
하지만, 스크롤하고 싶지 않은 화면이 나왔을 때, 멈추는 방법을 몰랐습니다. 그래서 공식 포럼이라든지 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의 바운스 스크롤이 원인이라고 생각하기 때문에, 이것이 제일 좋지 않을까 하는 생각이 합니다.
Reference
이 문제에 관하여([Ionic]ion-content의 스크롤을 중지하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/scrpgil/items/32d1b8e907af2b779ace
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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의 바운스 스크롤이 원인이라고 생각하기 때문에, 이것이 제일 좋지 않을까 하는 생각이 합니다.
Reference
이 문제에 관하여([Ionic]ion-content의 스크롤을 중지하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/scrpgil/items/32d1b8e907af2b779ace
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.scroll-content{
overflow: hidden;
}
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의 바운스 스크롤이 원인이라고 생각하기 때문에, 이것이 제일 좋지 않을까 하는 생각이 합니다.
Reference
이 문제에 관하여([Ionic]ion-content의 스크롤을 중지하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/scrpgil/items/32d1b8e907af2b779ace
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
처음으로 그 존재를 알았지만 ion-content에 no-bounce를 붙이는 방법도있을 것 같습니다.
이 속성을 붙이면, ion-content의 표시 영역내라면 스크롤 하지 않는다. 표시 영역을 넘으면 스크롤하게 된다는 동작이 됩니다.
<ion-content no-bounce>
</ion-content>
엄밀하게는, scroll을 멈추고 있는 것은 아니기 때문에, 번외편으로 했습니다만, 스크롤을 멈추고 싶은 유스 케이스의 대부분은 iOS의 바운스 스크롤이 원인이라고 생각하기 때문에, 이것이 제일 좋지 않을까 하는 생각이 합니다.
Reference
이 문제에 관하여([Ionic]ion-content의 스크롤을 중지하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/scrpgil/items/32d1b8e907af2b779ace텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)