↓↓↓ HTML如何局部滚动而头尾不滚动 ↓↓↓

最新推荐文章于 2022-06-29 17:05:07 发布

Rkatsiteli

最新推荐文章于 2022-06-29 17:05:07 发布

阅读量1.2k

点赞数

分类专栏： App内嵌套H5的那些事儿文章标签： html

本文链接：https://blog.csdn.net/qq_16559905/article/details/51532020

版权

App内嵌套H5的那些事儿专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML页如何局部滚动而整体不滚动

解决方案1：

兼容 android（4.3版本三星 note2）进行嵌套，没有引用任何插件，纯css。

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title></title>
    <style>
        body{
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
        #page{margin:0 auto;width:100%;text-align: center;}
        #header{width:100%; height:40px;line-height: 40px; position:absolute; top:0;background-color:red;}
        #footer{width:100%; height:40px;line-height: 40px; position:absolute; bottom:0; background-color:#ccc;}
        #content{width:100%;background: yellow; overflow-x: hidden;-webkit-overflow-scrolling: touch;position:absolute; top:40px; bottom:40px;}
        #content p{padding: 10px 20px;}
    </style>

</head>
<body>
<div id="page">
    <div id="header">定义顶部</div>  
    <div id="content">
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>
            <p>是打飞机了十分激烈的快速减肥水电费拉近了看水电费就开始了发动机上来看啥地方就两节课了双方的了开始叫对方 </p>

            <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100" onmouseover="this.stop();" onmouseout="this.start();">
                这里是要滚动的内容
            </marquee>

    </div>
    <div id="footer">footer定义底部</div>
</div>
</body>

页面图案有点low，功能要紧！

解决方案2：

使用 iframe，iframe要设置scrolling=”yes” 这样可以了。

解决方案3：

使用 scroll.js 插件来实现。

不会使用的请移步：http://download.csdn.net/download/leen04/7884359

解决方案4：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>头部不滚动</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            * {
                margin: 0 auto;
                padding: 0;
            }

            header {
                height: 3rem;
                background: green;
                width: 100%;
                border: 1px solid red;
            }

            #jubu {
                width: 100%;
                height: 400px;
                overflow: auto;
            }
        </style>
    </head>

    <body>
        <header>
            toubu
        </header>
        <div id="jubu">
            <img src="img/新尊享03_PxCook.png" />
        </div>
    </body>
    <!--<script src="js/zepto.min.js"></script>-->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        $.fn.scrollUnique = function() {
            return $(this).each(function() {
                var eventType = 'mousewheel';
                // 火狐是DOMMouseScroll事件
                if(document.mozHidden !== undefined) {
                    eventType = 'DOMMouseScroll';
                }
                $(this).on(eventType, function(event) {
                    // 一些数据
                    var scrollTop = this.scrollTop,
                        scrollHeight = this.scrollHeight,
                        height = this.clientHeight;

                    var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);

                    if((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
                        // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
                        this.scrollTop = delta > 0 ? 0 : scrollHeight;
                        // 向上滚 || 向下滚
                        event.preventDefault();
                    }
                });
            });
        };
        $("#jubu").scrollUnique();
    </script>

</html>

参考文章：点这里

Rkatsiteli

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
↓↓↓ HTML如何局部滚动而头尾不滚动 ↓↓↓

HTML页如何局部滚动而整体不滚动解决方案1：兼容 android（4.3版本三星 note2）进行嵌套，没有引用任何插件，纯css。<html><head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta content="width=device-width,initia
复制链接

扫一扫