Comment résoudre le problème du défilement lent dans Safari et du défilement lent des onglets horizontaux-js tutoriel-php.cn

Comment résoudre le problème du défilement lent dans Safari et du défilement lent des onglets horizontaux

一个新手

Libérer： 2017-10-08 09:33:13

original

2011 Les gens l'ont consulté

1. Solution

Ajouter -webkit-overflow-scrolling : touch
sous l'élément qui doit défiler. Par exemple (peut être collé directement) :

<!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>

Copier après la connexion

2. La raison

Le défilement horizontal est lent parce que Safari prend en charge nativement l'attribut -webkit-, mais il est utilisé par défaut. C'est le comportement de rendu dans le navigateur, donc il se figera lors du glissement. Mais après avoir utilisé cet attribut de défilement par débordement, un onglet de défilement natif, un contrôle de défilement natif sera créé, car le degré de glissement sera très fluide ~~~~ Quant à la raison, les étudiants qui sont familiers avec IOS devront peut-être explorer le contrôle natif . Compatibilité : IOS5.0 ou version ultérieure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!