집 > 기사 > 웹 프론트엔드 > Safari의 느린 스크롤 문제 및 가로 탭의 느린 스크롤 문제를 해결하는 방법

Safari의 느린 스크롤 문제 및 가로 탭의 느린 스크롤 문제를 해결하는 방법

一个新手원래의: 2017-10-08 09:33:131927검색

1. 해결 방법

스크롤해야 하는 요소 아래에 -webkit-overflow-scrolling: touch
를 추가합니다. 예(직접 붙여넣기 가능):

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>隐藏横向滚动条</title>
    <style>
    * {        
        margin: 0;        
        padding: 0;    
    }
    .cover {        
        width: 100%;        
        overflow: hidden;    
    }
    .father {        
        width: 100%;        
        padding: 0 10px;        
        background-color: #ff630c;        
        overflow-x: auto;        
        margin-top: -30px;        
        padding-bottom: 30px;        
        -webkit-transform: translateY(30px);        
        transform: translateY(30px);        
        box-sizing: border-box;    
    }
    .son {        
    width: 500%;        
    padding-bottom: 10px;    
    }

    .show {        
    width: 19%;        
    height: 60px;        
    background-color: #f00;        
    float: left;        
    margin-right: 5px;        
    text-align: center;    
    }

    .second {        
    width: 100%;        
    height: 50px;        
    background-color: #eee;        
    z-index: 100000;    
    }
    </style>
    <style>
    .father2 {        
    overflow-x: scroll;        
    width: 100%;        
    position: relative;        
    top: 10px;        
    margin-top: -10px;        
    -webkit-overflow-scrolling: touch;    
    }

    .son2 {        
    width: 500%;        
    padding-bottom: 10px;    
    }

    .show2 {        
    display: inline-block;        
    vertical-align: middle;        
    letter-spacing: -99999px;        
     text-align: center;        
     width: 19%;        
     margin-right: 10px;        
     height: 50px;        
     background-color: #f00;    
     }
     
    </style></head><body>
    <p class="cover">
        <p class="father">
            <p class="son">
                <p class="show">1</p>
                <p class="show">2</p>
                <p class="show">3</p>
                <p class="show">4</p>
                <p class="show">5</p>
            </p>
        </p>
    </p>
    <p class="cover">
        <p class="father2">
            <p class="son2">
                <p class="show2">1</p>
                <p class="show2">2</p>
                <p class="show2">3</p>
                <p class="show2">4</p>
                <p class="show2">5</p>
            </p>
        </p>
    </p>
    <p class="second"></p></body></html>

2. 가로 스크롤이 느린 이유

Safari는 기본적으로 -webkit- 속성을 지원하지만 기본값은 브라우저의 렌더링 동작이므로 슬라이딩할 때 Stuck을 반환하고 중지되었습니다. 하지만 이 오버플로 스크롤 속성을 사용한 후에는 슬라이딩 정도가 매우 매끄러워지기 때문에 네이티브 스크롤 탭, 네이티브 스크롤 컨트롤이 생성됩니다~~~~ 그 이유는 IOS에 익숙한 학생들은
호환성: IOS5.0 이상.

위 내용은 Safari의 느린 스크롤 문제 및 가로 탭의 느린 스크롤 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：nodejs로 채팅 기능을 구현하는 방법다음 기사：nodejs로 채팅 기능을 구현하는 방법