web移动端：iscroll实现局部滚动

最新推荐文章于 2025-05-27 11:13:12 发布

长安古意

最新推荐文章于 2025-05-27 11:13:12 发布

阅读量1.8w

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 控件学习

本文链接：https://blog.youkuaiyun.com/aiyishengyishi/article/details/53508963

jquery 同时被 2 个专栏收录

10 篇文章

订阅专栏

控件学习

9 篇文章

订阅专栏

本文介绍了如何使用iscroll实现web移动端的局部滚动功能。在点击按钮弹出长内容弹框时，iscroll能确保弹框滚动时不影响body的滚动。iscroll有多个版本，推荐使用最新版以解决旧版本的问题。文章详细讲解了iscroll的基本介绍、初始化方法（iscroll4与iscroll5的区别）、基础配置，并提供了一个实际应用的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结一下最近项目用到的一个功能点，具体要求如下：
body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件。

一开始项目是用touchmove模拟实现，后来决定尝试一下iscroll,碰巧在网上看到这篇文章

在这篇文章中获益匪浅：http://www.cnblogs.com/starof/p/5215845.html

iscroll5中文api地址：http://wiki.jikexueyuan.com/project/iscroll-5/basicfeatures.html

一.iscroll基本介绍

目前版本已经更新到了5，如果可以的话，尽量选择高版本，会将之前版本的一些问题进行修改
这里写图片描述

二.初始化

这里写图片描述

iscroll4和iscroll5初始化有所区别：

iscroll4：
必须用id来获取滚动的元素，前面不加’#’；
myscoll=new iScroll() new的时候 i 小写
iscroll5：
可以支持用class来获取，只需在前面写明“.class名”或“#id名”即可；
myscoll=new IScroll() new的时候 i大写

三.基础配置

myScroll1 = new IScroll('#tc-wrapper1', {
    hScrollbar:false,  //禁止横向滚动
    vScroll:true,      //为true时允许y轴滚动
    bounce:false,      //当滚动器到达容器边界时他将执行一个小反弹动画。在老的或者性能低的设备上禁用反弹对实现平滑的滚动有帮助。
    click:true,    　   //如果你想你的应用程序响应click事件，那么该设置次属性为true
    hideScrollbar: true //是否隐藏滚动条  
});

四.一个栗子

这里写图片描述

完整代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="misapplication-tap-highlight" content="no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="msapplication-tap-highlight" content="no" />
<title></title>

<style>
html,body{
    margin:0;
    padding: 0;
}
.btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: .5rem 0;
    background-color: pink;
    text-align: center;
    color: #fff;
    font-weight: 700;
}
.replyCeng{
    display: none;
    width: 100%;
    height:100vh;
    position: fixed;
    top:0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
}
.replyContainer {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    overflow: hidden;
    z-index: -2;
}
.replyTitle {
    width: 100%;
    padding: 1.0625rem 0;
    border-bottom: 1px solid #e0e0e2;
    color: #575b61;
    font-size: .9375rem;
    font-weight: 700;
    background-color: #fff;
    position: relative;
}
.closeReply {
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: .25rem;
    right: .25rem;
    z-index: 202;
    margin: 1rem;
}
.replyList {
    margin: 0 auto;
    width: 100%;
    height:14rem;
    position: relative;
    z-index: -1;
}
.reply-item {
    padding: .9375rem 1.625rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: #666666;
    border-bottom: 1px solid #e0e0e2;
}

.replyBtn {
    /*padding: 1.0625rem 1.625rem;*/
    font-size: .9375rem;
    color: #1daffa;
    font-weight: 700;
   /* width: 100%;*/
    background-color: #fff;
    border-top: 1px solid #e0e0e2;
    padding-bottom: 1.0625rem;
}
.replyBtn div {
    padding: .6rem;
    border: 1px solid #1daffa;
    border-radius: .3rem;
    margin: 1.0625rem 1.625rem;
    margin-bottom: 0;
}
</style>
</head>
<body>
    <div>
        <img src="image/langImg.jpg" style="width:100%;height:auto;"/>
    </div>
    <div class="btn" onclick="test()">button</div>
    <div class="replyCeng">
        <div class="replyContainer">
            <div class="replyTitle">
                <span>睡前小贴士</span>
                <img class="closeReply" src="image/close.png" />
            </div>
            <div class="replyList" id="tc-wrapper1">
                <dl class="num-list">
                    <div class="reply-item" onclick="selectReply()">要注意哦，睡觉前不要吃水果，可以适当喝牛奶</div>
                    <div class="reply-item">要注意哦，睡觉前不要吃水果，可以适当喝牛奶</div>
                    <div class="reply-item">要注意哦，睡觉前不要吃水果，可以适当喝牛奶</div>
                    <div class="reply-item">要注意哦，睡觉前不要吃水果，可以适当喝牛奶</div>
                    <div class="reply-item">把黑暗的光线试想成大自然的安眠药，从而提示你的身体去大量地制造褪黑激素，这是一种能帮助人平静下来的激素。来自旧金山的专门从事焦虑和失眠的心理学家、心理学博士Steve Orma表示，在入睡前将灯关掉能提高褪黑激素的产量，这样人就会感到倦意。支持这一说法的研究有：2011年发表在《临床内分泌与代谢》期刊上的一篇研究报告表明，在黄昏时刻到睡觉之前暴露在明亮的灯光下会极大地压缩褪黑激素的产量，使人变得极其兴奋。</div>
                    <div class="reply-item">把黑暗的光线试想成大自然的安眠药，从而提示你的身体去大量地制造褪黑激素，这是一种能帮助人平静下来的激素。来自旧金山的专门从事焦虑和失眠的心理学家、心理学博士Steve Orma表示，在入睡前将灯关掉能提高褪黑激素的产量，这样人就会感到倦意。支持这一说法的研究有：2011年发表在《临床内分泌与代谢》期刊上的一篇研究报告表明，在黄昏时刻到睡觉之前暴露在明亮的灯光下会极大地压缩褪黑激素的产量，使人变得极其兴奋。</div>
                </dl>
            </div>
            <div class="replyBtn">
                <div>管理</div>
            </div>
        </div>
    </div>


<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/iScroll.js"></script> 
<script type="text/javascript">
function test(){
    $(".replyCeng").css("display","-webkit-box");
    //$("#tc1").css("display","-webkit-box");
    myScroll1 = new IScroll('#tc-wrapper1', {
                scrollbarClass: 'myScrollbar' ,
                hScrollbar:false,
                vScroll:true,
                hideScrollbar: true //是否隐藏滚动条  
            });
    $('body').bind("touchmove",function(e){  
        e.preventDefault();  
    });

    $(".closeReply").unbind("click").bind("click",function(){
        $(".replyCeng").css("display","none");
        $('body').unbind("touchmove");
    });
}
/*显示弹层层调用show方法时重新调用new iScroll()*/
</script>
</body>
</html>