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

White feathe

发布于 2021-12-08 15:08:21

3K00

代码可运行

文章被收录于专栏：White feathe 的博客White feathe 的博客

运行总次数：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>

参考文章：点这里

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016/05/29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html