ios滚动条流畅-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,user-scalable=no;"/>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="box"></div>
<button type="button" id="submit">提交</button>
<div style="height: 300px; overflow: scroll; -webkit-overflow-scrolling : touch;">
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
    <p>滑动</p>
</div>
<script>
    $(function () {
        $("#submit").click(function () {
            if ($(".box").html() ==""){
                $.ajax({
                    type: "GET",
                    url: "http://jsonplaceholder.typicode.com/posts",
                    dataType: "json",
                    success: function(data){
                            $.each(data,function (index,values) {
                                console.log(values.title)
                                console.log(values.userId)
                                var content = '<ul><li><span  style="border: 1px solid #f0f">'+values.userId+'</span><span  style="border: 1px solid #6cff1a">'+values.title+'</span></li></ul>'
                                $(".box").append(content);
                            })
                    }
                })
            }else{
                alert("2")
            }
        })
    })
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/cheeso/article/details/79543072