CSS3에서 webkit-overflow-scolling을 사용하여 경험을 공유하세요.-CSS 튜토리얼-php.cn

CSS3에서 webkit-overflow-scolling을 사용하여 경험을 공유하세요.

yulia

풀어 주다： 2018-09-19 16:16:53

원래의

1871명이 탐색했습니다.

스크롤 막대는 페이지 레이아웃에서 자주 사용됩니다. 이 기사에서는 함정을 피하기 위해 -webkit-overflow-scolling을 사용한 경험을 공유할 것입니다.

우리 모두는 iOS Safari 브라우저와 앱 커널 브라우저에서 h5 페이지의 콘텐츠가 화면 높이를 초과하고 손가락이 화면을 미끄러지면 제스처가 화면을 떠나자마자 스크롤이 즉시 종료된다는 것을 알고 있습니다. . 이때 -webkit-overflow-scrolling=touch를 설정하면 페이지 스크롤을 원활하게 할 수 있지만, 이렇게 설정해도 문제가 많이 발생합니다.

1. -webkit-overflow-scrolling touch를 본문에만 설정하는 것은 유효하지 않습니다. html과 본문에 동시에 설정해야 합니다.

html,body{
    height: 100%;
    overflow: auto;
   -webkit-overflow-scrolling: touch;
}

로그인 후 복사

2. webkit-overflow-scrolling=touch on the parent 컨테이너, 하위 컨테이너는 고정된 하위 요소가 나타나는 것을 허용하지 않습니다. 왜 이렇게 말합니까? -webkit-overflow-scrolling=touch를 설정하면 화면을 슬라이드할 때 고정 속성이 유효하지 않고 화면과 함께 스크롤된다는 사실을 알게 되기 때문입니다. 이 요소는 스크롤이 중지될 때만 페이지에 고정됩니다. 분명히 이것은 우리가 원하는 결과가 아닙니다.

여기서 내 솔루션은 body 요소에 -webkit-overflow-scrolling을 설정하고 추가 div 컨테이너를 추가하여 스크롤이 필요한 곳에 설정한 다음 수정해야 하는 모든 컨테이너를 body 요소 내에 직접 배치하는 것이 아닙니다.

3. div에만 -webkit-overflow-scrolling 속성을 설정하는 것은 유효하지 않습니다. 테스트한 결과 먼저 상위 컨테이너 div1을 높이가 있는 컨테이너로 설정한 다음 초과된 항목에 -webkit-을 설정해야 한다는 것을 알았습니다. 하위 컨테이너입니다. 오버플로 스크롤 속성의 구체적인 코드는 다음과 같습니다.

<style>.div-p{ width: 100%; height: 500px;/*这是测试值，具体针对项目需求设置，不要超出子容器内容高度*/overflow: hidden;/*设不设定这个值对-webkit-overflow-scrolling没有影响*/}
.div-c{ width: 100%; height: 2000px; overflow: auto;/*测试发现一定要设定这个值才起作用*/ -webkit-overflow-scrolling: touch;}</style>
<div class="div-p">
<div class="div-c">我要滚动啊，，在ios要顺畅啊</div>
</div>

로그인 후 복사

반복 테스트 후 다음 설정도 효과적으로 -webkit-overflow-scrolling 속성을 트리거할 수 있는 것으로 나타났습니다.

<style>
.content-box{
  height: 500px;/*经过测试后发现只要设定的这个高度小于屏幕高度，-webkit-overflow-scrolling属性也能有效触发*/
  border: solid 1px green;
  overflow: auto;
  -webkit-overflow-scrolling: touch;}
</style>
<body>
<div class="content-box">哎呀我是要滚动的啊<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
有效果的哦。。。
</div>
</body>

로그인 후 복사

물론 HTML 렌더링이 완료되면 위 버전이 완료되어야 하는데, 화면 높이와 일치하도록 높이를 변경해야 하는데 이 방법은 유지 관리성이 너무 좋지 않아서 나중에 해결책을 찾았습니다. 구체적인 코드는 다음과 같습니다.

<style>
.ios-scroll-father{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem ;
  height: 100%;}
.ios-scroll-child{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem ;
  overflow: auto;}
  -webkit-overflow-scrolling touch
</style>
<div class="ios-scroll-father">
<div class="ios-scroll-child">
我要完美解决ios的顺畅滑动问题啊，，，来试试咯。演示，请自己添加代码到超出屏幕内容哦~
</div>
</div>

로그인 후 복사

여기서 -webkit-overflow를 설정해야 한다는 점을 상기시키고 싶습니다. 속성을 -스크롤할 때 높이를 설정하지 않거나 높이+패딩의 높이가 화면 높이를 초과해서는 안 됩니다. , 그렇지 않으면 상단이나 하단으로 스크롤할 때 해당 부분이 가로채서 나타나려면 슬라이드해야 한다는 것을 알게 될 것입니다. . . 이게 함정이군요. 실수로 높이와 패딩을 100%로 설정해서 이런 현상을 발견했는데, 여기저기 찾아봐도 문제가 없어서 코드만 삭제하고 천천히 해결했습니다.

4. 물론 이런 문제들만 있었다면 정말 해결이 쉽겠지만, 어느 날 목록을 작성했는데 스크롤 페이징 효과가 필요했는데 이때 스크롤바의 스크롤 이벤트를 듣게 되었습니다. scrollTop은 수시로 업데이트되며 페이지 스크롤이 멈출 때까지 scrollTop 값을 얻을 수 없습니다.

5. 페이지 스크롤 중에는 전환 애니메이션이 실행되지 않습니다. 해결 방법이 있으면 메시지를 남겨주세요. . .

위 내용은 프로젝트 개발 과정에서 얻은 결론이며, 발견한 정보를 바탕으로 반복적으로 테스트한 내용입니다. 잘못된 점이 있으면 지적해 주세요.

위 내용은 CSS3에서 webkit-overflow-scolling을 사용하여 경험을 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!