全屏滚动

最新推荐文章于 2023-08-18 14:56:59 发布

尢尢12344

最新推荐文章于 2023-08-18 14:56:59 发布

阅读量318

点赞数

分类专栏：原生js 文章标签： js scrollTop 鼠标全屏滚动

本文链接：https://blog.csdn.net/qq_34320300/article/details/78741544

版权

原生js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

全屏滚动
问：将一个div里的图片铺满当前整个屏幕，鼠标向下滑是其他内容，就像PPT那样，图片是一页，其他内容在其他页。
代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            text-decoration: none;
            border: none;
        }
        html, body {
            width: 100%;
        }
        .oneCell {
            width: 100%;
            min-height: 200px;
        }
        .oneCell:nth-child(odd){
            background: #ff0077;
        }

        .oneCell:nth-child(even){
            background: #ffaa00;
        }
    </style>
</head>
<body onresize="resizeFun()">
    <div id="wrap">
        <div class="oneCell"><h1>1</h1></div>
        <div class="oneCell"><h1>2</h1></div>
        <div class="oneCell"><h1>3</h1></div>
        <div class="oneCell"><h1>4</h1></div>
    </div>
</body>

<script>
    var topNum = 0;
    var timeoutflag = null;
    window.onload = function () {
        this.changeHeight();
    }
    // 鼠标轮滑滚动出发事件
    var scrollFunc = function (e) {
        var changeValue = 0; // 轮滑移动的距离。上滚负，下滚正。
        e = e || window.event;
        if (e.wheelDelta) {
            changeValue = e.wheelDelta; // IE/Opera/Chrome 
        } else if (e.detail) { 
            changeValue = e.detail; // Firefox 
        }
        if (timeoutflag != null) {
            clearTimeout(timeoutflag);
        } 
        // 利用定时器，100毫秒内的轮滑滚动只触发一次 页面滚动
        timeoutflag = setTimeout(function(){
            changeScrollTop(changeValue);
        },100);
    }
    // 页面滚动事件
    function changeScrollTop (changeValue) {
        console.log('changeValue');
        var cellHeight = window.innerHeight;
        if (changeValue < 0) {
            topNum ++;
            window.scrollTo(0, topNum * cellHeight);
        } else if (changeValue > 0) {
            topNum --;
            window.scrollTo(0, topNum * cellHeight);
        }
    }

    // 鼠标滚动事件（兼容）
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    } 
    window.onmousewheel = document.onmousewheel = scrollFunc;

    // 动态改变div高度
    function changeHeight() {
        var cellHeight = window.innerHeight;
        var cellWidth = window.innerWidth;
        var aOneCell = document.getElementsByClassName('oneCell');
        for (var i = 0; i < aOneCell.length; i++) {
            aOneCell[i].style.height = cellHeight + 'px';
        }
    }
    // 浏览器窗口大小监听
    function resizeFun () {
        this.changeHeight();
    }

</script>

</html>

解析：
1、绑定onresize事件，动态获取屏幕高度容，动态设置可见div的高度

<body onresize="resizeFun()">

    // 动态改变div高度
    function changeHeight() {
        var cellHeight = window.innerHeight;
        var cellWidth = window.innerWidth;
        var aOneCell = document.getElementsByClassName('oneCell');
        for (var i = 0; i < aOneCell.length; i++) {
            aOneCell[i].style.height = cellHeight + 'px';
        }
    }
    // 浏览器窗口大小监听
    function resizeFun () {
        this.changeHeight();
    }

2、绑定滚动事件，动态设置可视区域顶部距离浏览器顶部的距离scrollTop

    // 鼠标轮滑滚动出发事件
    var scrollFunc = function (e) {
        var changeValue = 0; // 轮滑移动的距离。上滚负，下滚正。
        e = e || window.event;
        if (e.wheelDelta) {
            changeValue = e.wheelDelta; // IE/Opera/Chrome 
        } else if (e.detail) { 
            changeValue = e.detail; // Firefox 
        }
        if (timeoutflag != null) {
            clearTimeout(timeoutflag);
        } 
        // 利用定时器，100毫秒内的轮滑滚动只触发一次 页面滚动
        timeoutflag = setTimeout(function(){
            changeScrollTop(changeValue);
        },100);
    }
    // 页面滚动事件
    function changeScrollTop (changeValue) {
        console.log('changeValue');
        var cellHeight = window.innerHeight;
        if (changeValue < 0) {
            topNum ++;
            window.scrollTo(0, topNum * cellHeight);
        } else if (changeValue > 0) {
            topNum --;
            window.scrollTo(0, topNum * cellHeight);
        }
    }
    // 鼠标滚动事件（兼容）
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    } 
    window.onmousewheel = document.onmousewheel = scrollFunc;