How to solve the problem of slow scrolling in Safari and slow scrolling of horizontal tabs-JS Tutorial-php.cn

How to solve the problem of slow scrolling in Safari and slow scrolling of horizontal tabs

一个新手

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

Original

1964 people have browsed it

1. Solution

Add -webkit-overflow-scrolling: touch;
under the element that needs to be scrolled Give an example (can be pasted directly):

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

Copy after login

2. The reason

Horizontal scrolling is slow because Safari natively supports the -webkit- attribute, but the default is The rendering behavior in the browser causes lag when sliding. But after using this overflow-scrolling attribute, a native scrolling tab, native-scrolling control will be created, because the sliding degree will be very smooth~~~~As for the reason, students who are familiar with IOS may need to explore the native control. .
Compatibility: IOS5.0 or later.

The above is the detailed content of How to solve the problem of slow scrolling in Safari and slow scrolling of horizontal tabs. For more information, please follow other related articles on the PHP Chinese website!