精华内容
下载资源
问答
  • 今天小编就为大家分享一篇js监听html页面上下滚动事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • js监听html页面上下滚动事件

    万次阅读 2017-06-28 14:24:05
    最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示:不多说了,直接上代码了,经过测试可以使用:<!DOCTYPE html> ...

    最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示:

    这里写图片描述

    不多说了,直接上代码了,经过测试可以使用:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Dome</title>
            <script type="text/javascript">  
    
                function scroll(){
                    //console.log("打印log日志");实时看下效果
                    console.log("开始滚动!");
                }
    
                var scrollFunc = function (e) {  
                    e = e || window.event;  
                    if (e.wheelDelta) {  //第一步:先判断浏览器IE,谷歌滑轮事件               
                        if (e.wheelDelta > 0) { //当滑轮向上滚动时  
                            console.log("滑轮向上滚动");  
                        }  
                        if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                            console.log("滑轮向下滚动");  
                        }  
                    } else if (e.detail) {  //Firefox滑轮事件  
                        if (e.detail> 0) { //当滑轮向上滚动时  
                            console.log("滑轮向上滚动");  
                        }  
                        if (e.detail< 0) { //当滑轮向下滚动时  
                            console.log("滑轮向下滚动");  
                        }  
                    }  
                }
                //给页面绑定滑轮滚动事件  
                if (document.addEventListener) {//firefox  
                    document.addEventListener('DOMMouseScroll', scrollFunc, false);  
                }  
                //滚动滑轮触发scrollFunc方法  //ie 谷歌  
                window.onmousewheel = document.onmousewheel = scrollFunc;
    
    
    
            </script>  
    
        </head>
        <body onscroll="scroll()">
            <div style="height: 2000px;background-color: aqua;"></div>
        </body>
    </html>
    

    如果有没有使用过console.log(“”)的,我这里截下图看下吧(谷歌浏览器):
    这里写图片描述

    有什么问题可以加我的群问:472148690

    展开全文
  • 背景:页面列表底部存在一些操作按钮,列表太长时候超过了显示器高度,需要滚动列表到最底部才能看到这些按钮进行操作 需求:列表没超过屏幕高度时候,这些按钮处于列表底部30px处,列表超出屏幕高度时候,这些按钮...

     

    背景:页面列表底部存在一些操作按钮,列表太长时候超过了显示器高度,需要滚动列表到最底部才能看到这些按钮进行操作

    需求:列表没超过屏幕高度时候,这些按钮处于列表底部30px处,列表超出屏幕高度时候,这些按钮距离屏幕底部0px处,跟随页面滚动。

    下图红色箭头所示这个按钮区域为正常显示状态

     

     页面网上滚动效果如下

     

     

    Html

    CSS

    /*块跟随*/
    .list-bottom{
       position: fixed;
       bottom: 20px;
       width: 1000px;
       box-shadow: 0px 0px 13px 1px rgba(51,51,51,0.1);
    }

     

    JS 

    //模块跟随
    $(".fixed").height('100%');
    $(".list-bottom").width($(".content-r").width());
    $(".list-bottom").css({"position":"fixed","bottom":"0"});
    if($(".content-r").height()<1024){
        $(".content-r").attr("style","min-height:1035px");
    }
    $(function() {
        ks = $(window).height();
        mh = $(document).height();
        fh = $(".fixed").height();
        t = $(".fixed").offset().top;
        bl = $(".list-bottom").offset().top;
        trh = $(".content-r").height()-750;
        $(window).scroll(function(){
            s = $(document).scrollTop();
            bt = $("#footer").offset().top-s;
            ht = $(".list-bottom").offset().top-s;
            rb = $(".content-r").height()-s;
            if(s>t){
                $(".fixed").css({"position":"fixed","top":"0"});
                if(bt<510){
                    $(".fixed").css({"position":"fixed","top":"auto","bottom":"510px"});
                }
            }else{
                $(".fixed").css({"position":"absolute","top":"0"});
                $(".fixed").css('top',$(".user-info").height()+172);
    
            }
            if(s>trh){
                $(".list-bottom").css({"position":"relative"});
            }else{
                $(".list-bottom").css({"position":"fixed"});
            }
    
            var wh = $(window).height(),
                ot = $(".list-bottom").offset().top,
                ds =  $(document.documentElement).scrollTop();
            icoimg_h = $(".list-bottom").height();//是标签高度
    
            bh = wh - icoimg_h - [ot -ds ];
    
            if(bh>0){
                $(".list-bottom").css({"position":"relative"});
            }else{
                $(".list-bottom").css({"position":"fixed"});
            }
        });
    
    });
    展开全文
  • 页面上下滚动_scroll

    2019-01-30 14:56:52
    DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jq_3.3.1_mi.js"></script>
        <style>
            body{margin: 0 ;padding: 0; color: red;text-align: center}
            .nav{width: 100%;height: 50px;background-color: cyan;position: fixed;top: 0}
            .nav2{background-color: red}
            .banner{width: 80%;height:200px;background-color:darkblue;;margin: 0 auto;margin-top: 50px}
            .content{width: 90%;height:1000px;background-color: darkgrey;;margin: 0 auto}
        </style>
    </head>
    <body>
        <div class="nav">nav</div>
        <div class="banner">banner</div>
        <div class="content">content</div>
    
        <script>
            $(function(){//JQ就绪函数 写法 固定
                $(window).scroll(function(){//滚动事件
                    //scrollTop 获取window下拉距离顶部的高度
                     var top=$(window).scrollTop();
                     if(top>0){
                        $('.nav').css('display','none');
                     }else{
                        $('.nav').css('display','block');
                     } 
    
                     if(top>250){
                        $('.nav').addClass('nav2').css({'display':'block','color':'#fff'});
                     }else{
                        $('.nav').removeClass('nav2');//清除掉增加的class类
                     }
                });
            })
        </script>
    
    </body>
    </html>

     

    展开全文
  • 在ios任何版本的浏览器(包括ios微信内置的浏览器),滚动页面的时候会出现整个页面上下滚动的效果(百度说是橡皮筋效果),虽然不耽误使用,但是让人心烦,所以要禁止掉这个行为。 有两种方法可以解决这个问题:...

    在ios任何版本的浏览器(包括ios微信内置的浏览器),滚动页面的时候会出现整个页面上下滚动的效果(百度说是橡皮筋效果),虽然不耽误使用,但是让人心烦,所以要禁止掉这个行为。

    有两种方法可以解决这个问题:(推荐使用第二种方法)

    1.用fixed定位来解决

    解决思路:这个就是把html,body设置width: 100%; height: 100%; position: fixed;top:0;left:0;

    注意问题:测试在微信内生效,嵌入到webview中失效,其他还没测,测好了在更。

    2.阻止body的touchmove事件                                                                                                                                                               

    但是事件是冒泡的,阻止了body的touchmove事件,如果其他有元素需要滑动该怎么办呢?

    解决思路:1.首先给需要滑动的元素加一个touchmove事件,事件触发的时候给event设置一个属性isSCROLL为true;

                      2.然后给body加touchmove事件,触发事件时判断event的isSCROLL属性是否为true,否的话就禁止默认事件

                      3.是的话代表点击的事件源为需要滑动的元素,判断其滑动的最高点和最低点加一个限制就ok了,类似碰壁反弹

    var ios = navigator.userAgent.indexOf('iphone');//判断是否为ios
    
    if(ios == -1){  
        //ios下运行
        var divEl = ....//你需要滑动的dom元素
        iosTrouchFn(divEl);
    }
    
    function iosTrouchFn(el) {
        //el需要滑动的元素
        el.addEventListener('touchmove',function(e){
            e.isSCROLL = true;
        })
        document.body.addEventListener('touchmove',function(e){
            if(!e.isSCROLL){
                e.preventDefault(); //阻止默认事件(上下滑动)
            }else{
                //需要滑动的区域
                var top = el.scrollTop; //对象最顶端和窗口最顶端之间的距离 
                var scrollH = el.scrollHeight; //含滚动内容的元素大小
                var offsetH = el.offsetHeight; //网页可见区域高
                var cScroll = top + offsetH; //当前滚动的距离
    
                //被滑动到最上方和最下方的时候
                if(top == 0){
                    top = 1; //0~1之间的小数会被当成0
                }else if(cScroll === scrollH){
                      el.scrollTop = top - 0.1;
                }
            }
        }, {passive: false}) //passive防止阻止默认事件不生效
    }
    
    
    

    最后写一点 passive 是addEventListener最后改版的参数,如果想了解的话给大家推个链接

    https://www.cnblogs.com/ziyunfei/p/5545439.html

    展开全文
  • 示例文件中包括JavaScript文件jquery.multiscroll.js和CSS文件jquery.multiscroll.css的插件。当然,你可以添加jQuery UI库 使用方法也很简单: ... 2、将body中的html代码复制到你需要的地方即可
  • doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-...
  • 最近碰到设计师的一个设计效果要求,其他网站也有实现:state1:当网页向下滚动时,页面header栏消失,顶部nav往上靠;state2:当网页向上滚动时,页面header栏出现,顶部nav顺着nav往下靠。页面已经含有以下功能:1、...
  • DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } body{ background: linear-gradient(to right t
  • 转载地址:http://www.dowebok.com/134.html简介和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal....
  • doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <title>MDN Example</title> <script type="text/jav...
  • 在本教程中,我们将使用ScrollMagic.js(一个非常流行JavaScript库)来构建一个侧边栏,该侧边栏在页面滚动时变得很粘滞。 通过三个步骤(HTML,CSS和JavaScript),我们将概述整个过程。 这是我们要创建的内容...
  • 去掉html页面滚动

    2019-09-25 17:28:22
    去掉左右滚动条,保留上下滚动条:<body style="overflow-x:hidden;overflow-y:auto;"> 如果页面头部有:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
  • DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE></TITLE> <style type="text/css"> <!-- .STYLE1 { color: #FF0000; font-si...
  • 文字上下滚动

    2015-03-15 23:18:00
    公司做个页面效果,文字向上滚动,需要循环,鼠标移上去,清除定时器停止运动,鼠标移除,运动继续。 之前一般在17素材网找类似的效果进行修改,总觉得没意思,自己写一个吧, <!doctype html> <...
  • HTML代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,i...
  • // 获取滚动滚动的高度 var contLeftTop = $('.cont-left').offset().top +20; // 右侧列表相对于文档的高度 var scrollBottom = $(document).height() - $(window).scrollTop() - boxfixed.height(); ...
  • 大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效。如下图示效果: <html> <head> <title>js实现文字...
  • JS单图上下滚动

    2019-07-19 15:47:43
    写入外层div 插入要滚动的长图 2、添加两个空白span的部分,平分外层div的width。 3、样式中,设置对应的position属性。根据“子绝父相”,构建基本页面。 JS逻辑部分 首先分析此效果的构成。 1、鼠标进入上...
  • 同事推荐将datagrid上加一个toolbar 将上面的工具元素加上就可以了 toolbar: '#divListToolbar', 转载于:https://www.cnblogs.com/xiaoruilin/p/7105844.html
  • 接上篇文章:https://www.cnblogs.com/ligulalei/p/10622778.html在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚点进行页面dom定位,但是这个demo在ios中运行存在兼容性问题,滑动页面时...
  • js,jq单行文字上下滚动,方法记录 页面布局什么没什么新奇 只要保证只显示一行文字就好 如果需要显示多行 自行设置高度,这都不重要 <!DOCTYPE html> <html> <head> <meta charset=...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 264
精华内容 105
关键字:

html页面上下滚动