So lösen Sie das Problem des langsamen Scrollens in Safari und des langsamen Scrollens horizontaler Tabs-js-Tutorial-php.cn

So lösen Sie das Problem des langsamen Scrollens in Safari und des langsamen Scrollens horizontaler Tabs

一个新手

Freigeben： 2017-10-08 09:33:13

Original

2011 Leute haben es durchsucht

1. Lösung

Fügen Sie -webkit-overflow-scrolling hinzu: Berühren Sie; unter dem Element, das gescrollt werden muss Beispiel (kann direkt eingefügt werden):

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

Nach dem Login kopieren

2. Der Grund

Langsames horizontales Scrollen liegt darin, dass Safari das -webkit--Attribut nativ unterstützt, es aber nicht wird standardmäßig verwendet. Es handelt sich um das Renderverhalten im Browser, sodass es beim Schieben einfriert. Nach Verwendung dieses Overflow-Scrolling-Attributs wird jedoch eine native Scrolling-Registerkarte und eine native Scrolling-Steuerung erstellt, da der Gleitgrad sehr reibungslos verläuft. ~~~~ Aus diesem Grund müssen Schüler, die mit IOS vertraut sind, möglicherweise das erkunden native Kontrolle Kompatibilität: IOS5.0 oder höher.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem des langsamen Scrollens in Safari und des langsamen Scrollens horizontaler Tabs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!