精华内容
参与话题
问答
  • js中scroll的简单用法

    千次阅读 2017-12-22 15:51:40
    具体js文本的用法,用于记忆文本阅读,在ios和安卓手机 componentDidMount() { var getTop = sessionStorage.getItem('top'); if(getTop){ window.scrollTo(0, getTop); }else{ window.scrollTo(0,0) ...
    具体js文本的用法,用于记忆文本阅读,在ios和安卓手机
    componentDidMount() {
    	
    	  var getTop = sessionStorage.getItem('top');
          if(getTop){
    	     window.scrollTo(0, getTop);
    	  }else{
    	  	 window.scrollTo(0,0)
    	  }文本内容记忆
          
    }
    
    
    moveEvent(eve){
    		var top = document.documentElement.scrollTop || document.body.scrollTop;
    	    sessionStorage.setItem('top',top);
    }

    
    


    <div className="content_container" onTouchMove={this.moveEvent.bind(this)}>

    具体有关scroll的用法,日后补全
    展开全文
  • js的scroll事件

    千次阅读 2018-07-25 08:59:33
    这个代码是在id为box的div里写了很多p标签然后溢出,给#box设置overflow:scroll;然后在#box里滚动条滚动时就会输出 &lt;script&gt; var box = document.getElementById("box"); // 元素对象的...

     这个代码是在id为box的div里写了很多p标签然后溢出,给#box设置overflow:scroll;然后在#box里滚动条滚动时就会输出

    <script>
        var box = document.getElementById("box");
        // 元素对象的onscroll事件,当元素内容发生滚动时触发,它是一个频繁触发的事件
        box.onscroll = function(){
            // console.log("div发生滚动了");
            
            // scrollTop属性表示元素纵向滚动偏移量
            // console.log(box.scrollTop);
            
            // scrollHeight属性表示元素的内容高度
            // console.log(box.scrollHeight);
            
            // 元素内容高度 - 元素本身高度 = 最大偏移量
            // 元素的当前偏移量等于最大偏移量时,说明滚动到底部了
            if((box.scrollHeight - box.clientHeight) == box.scrollTop){
                console.log("到底了");
            }
        }
    </script>

     

    展开全文
  • scroll事件及其应用

    2020-09-03 21:17:33
    scroll事件及其应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...

    scroll事件及其应用

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            ul li {
                height: 600px;
                border: 1px solid #ccc;
                list-style: none;
            }
            
            .header {
                height: 500px;
                background-color: red;
            }
            
            ol {
                list-style: none;
                width: 700px;
                display: flex;
                margin: 0 auto;
                position: sticky;
                top: 0;
                text-align: center;
            }
            
            ol li {
                flex: 1;
                cursor: pointer;
            }
            
            .backTop {
                position: fixed;
                right: 120px;
                bottom: 120px;
                padding: 20px;
                border: 1px solid #ccc;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
    
        <div class="header"></div>
        <ol>
            <li><a>1</a></li>
            <li><a>2</a></li>
            <li><a>3</a></li>
            <li><a>4</a></li>
            <li><a>5</a></li>
            <li><a>6</a></li>
            <li><a>7</a></li>
            <li><a>8</a></li>
            <li><a>9</a></li>
            <li><a>10</a></li>
            <li><a>11</a></li>
            <li><a>12</a></li>
        </ol>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
        <div id="backTop" class="backTop">回到顶部</div>
        <script>
            var backTop = document.querySelector("#backTop")
                //获取页面的高度
            var pageHeight = document.body.clientHeight
                //获取视口高度
            let clientHeight = document.documentElement.clientHeight;
            let timer = null;
            //scroll 事件  当页面卷动值发送变化的时候触发
            document.onscroll = function() {
                // console.log(1111);
                //兼容IE浏览器
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // console.log(pageHeight - clientHeight - scrollTop);
                //判断是否滚动到页面底部了
                if (pageHeight - clientHeight - scrollTop < 300) {
                    clearTimeout(timer);
                    //为了不让浏览器频繁触发一个已经设置完成的事件
                    timer = setTimeout(function() {
                        console.log(1);
                        backTop.style.display = 'block'
                    }, 1000)
                    //节流模式
                } else {
                    backTop.style.display = 'none'
                }
    
            }
        </script>
    </body>
    
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            ul li {
                height: 600px;
                border: 1px solid #ccc;
                list-style: none;
            }
            
            .header {
                height: 500px;
                background-color: red;
            }
            
            ol {
                list-style: none;
                width: 1200px;
                display: flex;
                margin: 0 auto;
                position: sticky;
                top: 0;
                text-align: center;
            }
            
            ol li {
                flex: 1;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
    
        <div class="header"></div>
        <ol>
            <li><a>1</a></li>
            <li><a>2</a></li>
            <li><a>3</a></li>
            <li><a>4</a></li>
            <li><a>5</a></li>
            <li><a>6</a></li>
            <li><a>7</a></li>
            <li><a>8</a></li>
            <li><a>9</a></li>
            <li><a>10</a></li>
            <li><a>11</a></li>
            <li><a>12</a></li>
        </ol>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
        <script>
            //scrollTop 获取页面的卷动值(滚动值)
            //document.documentElement.scrollTop||document.body.scrollTop
    
            // setTimeout(function() {
            //     //如果要设置  请两条分开书写
            //     document.documentElement.scrollTop = 4000;
            //     document.body.scrollTop = 4000;
    
            // }, 3000)
    
            //获取的所有a标签
            //将伪数组转化为数组  以便使用数组的方法
            let arr = Array.from(document.querySelectorAll("a"));
            arr.forEach(function(value, index) {
                value.onclick = function() {
                    // console.log(index);
                    document.documentElement.scrollTop = 500 + 21 + index * 602
                }
            })
        </script>
    </body>
    
    </html>
    
    展开全文
  • 在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll、scrollBy和 scrollTo,三个方法都带两个参数:x(X...

    在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll、scrollBy和 scrollTo,三个方法都带两个参数:x(X轴上的偏移量)和y(Y轴上的偏移量)。因此我们只需修改x,y的偏移量来设置滚动条的位置。另外,页面的滚动高度必须在网页加载完成后才能获取到,所以触发事件用onload

    方法一:用scroll方法实现滚动条位于最底端。

    1<</CODE>body onload="scroll(0,document.body.scrollHeight) ">

    方法二:用scrollBy方法实现滚动条位于最右端。

    1<</CODE>body onload="scrollBy(document.body.scrollWidth,0) ">

    方法三:用scrollTo方法实现水平滚动条和纵向滚动条均居中。

    1<</CODE>body onload="scrollTo(document.body.scrollWidth/2,document.body.scrollHeight/2)">

    虽然使用scroll、scrollBy和scrollTo方法的效果一样,但是彼此之间还是有一些区别的。
    经测试如果使用某一确定的位置参数时,不需要带单位,例据顶端300像素:


    <</CODE>body onload="scroll(0,300) ">

    注意:在vue中使用时,事件触发后,实现页面滚动,需要在nextTick()方法中执行。
          例如:     this.$refs.table.style['justify-content'] = 'flex-start'; //flex布局:项目位于容器开头
                    this.$nextTick( () => { //图片列表栏始终左对齐
                        this.$refs.table.scrollBy(document.body.scrollWidth, 0)                 
                    })
    展开全文
  • [qss]scroll 样式

    2020-11-25 10:20:20
    //scroll.qss /*垂直滚动条整体*/ QScrollBar:vertical { width:8px; background:rgb(0,0,0,0%); margin:0px,0px,0px,0px; padding-top:12px; /*上预留位置*/ padding-bottom:12px; /*下预留位置*/ } /*滚动条...
  • 涉及到滑动,就涉及到VIEW,大家都知道,android的UI界面都是由一个一个的View以及View的派生类组成,View作为基类,而常用的布局里面的各种布局就是它派生出来的ViewGroup的子类,ViewGroup作为各个组件的容器搭建了...
  • better-scroll插件的介绍及使用

    万次阅读 多人点赞 2018-08-26 20:51:49
    在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,可以是竖向滚动的列表,也可以是横向的,用better-scroll可以帮助我们实现这个 什么是 better-scroll  better-scroll 是一个移动端滚动的解决...
  • scroll_recycle.zip

    2020-04-29 17:28:02
    scrollview嵌套recycleView各种问题可以由recycleView设置多布局来解决 * 场景:顶部有一个gridView,中间有个推荐,下方有一个瀑布流 * 常规方式(多级嵌套):scrollview + gridView/recycleView + textView + ...
  • elasticsearch 深入 —— Scroll滚动查询

    万次阅读 2018-09-18 09:19:03
    Scroll search 请求返回一个单一的结果“页”,而 scroll API 可以被用来检索大量的结果(甚至所有的结果),就像在传统数据库中使用的游标 cursor。 滚动并不是为了实时的用户响应,而是为了处理大量的数据,例如...
  • 需求: 实现A页面点击按钮wx.navigateToB页面并定位到view位置。 A.wxml <button bindtap='clickBtn'>跳转</button> A.js clickBtn: function(){ ...viewId=view4' // 参数view...
  • 当功能需求上需要使用动态去加载 item 的时候,我想到的第一个方法就是当listview滑动到底部的时候再动态的创建出一部分 item 控件。但是有个很蛋疼的事情,直接调用 Lua Code ListView:...
  • 微信小程序去掉scroll-view滚动条的方式 在微信小程序的项目开发中,时常有需要用到scroll-view的地方。 但是使用scroll-view就难免的会出现默认的滚动条,很影响页面的样式。 我在做项目的时候就遇到了这样的问题,...
  • Scroll RectUnity并没有提供现成的滚动区域,而且需要借助Scroll Rect组件来实现。1.创建Scroll Rect(1)创建Panel,添加Scroll Rect组件 (2)设定Scroll Rect组件的内容对象,即需要滚动显示的内容对象,可以是...
  • 出问题的代码在一开始的时候,想要测试scroll-into-view的作用,就把scroll-into-view的ID写死,结果然并卵后来发现,不是这个功能不好用,而是要在组件布局完成后,动态的改变这个scroll-into-view的值,才会跳到...
  • Super Scroll List for NGUI  插件地址:https://www.assetstore.unity3d.com/cn/#!/content/94796  这是个NGUI的辅助插件,可以帮你管理UIScrollView下的重复元素,哪怕拖拽列表成员成千上万,照样流畅到爆...
  • Scroll会计算边界,和直接拖拽的效果类似 MoveRelative不计算边界,超出边界了也不会管,也不会应用缓动效果
  • ScrollView源码分析

    千次阅读 2018-06-29 21:14:27
    前言 ...一直想看看Scrollview内部怎么实现的,因为学习自定义view和自定义布局最好的老师就是源码,现在就来看看scrollview的源码。 首先先看注释 Scrollview是一个这样的view group,让放在它...
  • ScrollView使用简介

    2019-07-27 17:14:23
    ScrollView的滚动方向 */ enum class Direction { NONE, VERTICAL, HORIZONTAL, BOTH }; /** ScrollView的滚动事件类型 */ enum class EventType { SCROLL_TO_TOP, // 向上滚动 SCROLL_TO_BOTTOM, // 向下滚动 ...
  • 主声明: 转载请在开头附加本文链接及作者信息,并标记为转载。本文由博主威威喵原创,请多支持与指教。 ... 自定义ViewGroup的时候,你一定会遇到这种情况——滑动冲突。发生这种情况的前提是你的自定义ViewGroup...
  • ScrollView基本使用

    千次阅读 2012-10-11 16:04:36
    ScrollView原理  视图的滚动过程,其实是在不断修改原点坐标。当手指触摸后,ScrollView会暂时拦截触摸事件,使用一个计时器。假如在计时器到点后没有发生手指移动事件,那么ScrollView发送tracking events到被...

空空如也

1 2 3 4 5 ... 20
收藏数 299,910
精华内容 119,964
关键字:

scroll