scroll_scrollview - CSDN
精华内容
参与话题
  • js中scroll的简单用法

    千次阅读 2017-12-22 15:53:44
    具体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>
    
    展开全文
  • 在上一篇文章 “Elasticsearch:运用scroll接口对大量数据实现更好的分页”,我们讲述了如何运用scroll接口来对大量数据来进行有效地分页。在那篇文章中,我们讲述了两种方法: from加上size的方法来进行分页 运用...

    在上一篇文章 “Elasticsearch:运用scroll接口对大量数据实现更好的分页”,我们讲述了如何运用 scroll 接口来对大量数据来进行有效地分页。在那篇文章中,我们讲述了两种方法:

    1. from 加上 size 的方法来进行分页
    2. 运用 scroll 接口来进行分页

    对于大量的数据而言,我们尽量避免使用 from+size 这种方法。这里的原因是 index.max_result_window 的默认值是 10K,也就是说 from+size 的最大值是1万。搜索请求占用堆内存和时间与 from+size 成比例,这限制了内存。假如你想 hit 从 990 到 1000,那么每个 shard 至少需要 1000 个文档:

    为了避免过度使得我们的 cluster 繁忙,通常 Scroll 接口被推荐作为深层次的 scrolling,但是因为维护 scroll 上下文也是非常昂贵的,所以这种方法不推荐作为实时用户请求。search_after 参数通过提供实时 cursor 来解决此问题。 我们的想法是使用上一页的结果来帮助检索下一页。

     

    我们先输入如下的文档到twitter索引中:

    POST _bulk
    { "index" : { "_index" : "twitter", "_id": 1} }
    {"user":"双榆树-张三", "DOB":"1980-01-01", "message":"今儿天气不错啊,出去转转去","uid":2,"age":20,"city":"北京","province":"北京","country":"中国","address":"中国北京市海淀区","location":{"lat":"39.970718","lon":"116.325747"}}
    { "index" : { "_index" : "twitter", "_id": 2 }}
    {"user":"东城区-老刘", "DOB":"1981-01-01", "message":"出发,下一站云南!","uid":3,"age":30,"city":"北京","province":"北京","country":"中国","address":"中国北京市东城区台基厂三条3号","location":{"lat":"39.904313","lon":"116.412754"}}
    { "index" : { "_index" : "twitter", "_id": 3} }
    {"user":"东城区-李四", "DOB":"1982-01-01", "message":"happy birthday!","uid":4,"age":30,"city":"北京","province":"北京","country":"中国","address":"中国北京市东城区","location":{"lat":"39.893801","lon":"116.408986"}}
    { "index" : { "_index" : "twitter", "_id": 4} }
    {"user":"朝阳区-老贾","DOB":"1983-01-01", "message":"123,gogogo","uid":5,"age":35,"city":"北京","province":"北京","country":"中国","address":"中国北京市朝阳区建国门","location":{"lat":"39.718256","lon":"116.367910"}}
    { "index" : { "_index" : "twitter", "_id": 5} }
    {"user":"朝阳区-老王","DOB":"1984-01-01", "message":"Happy BirthDay My Friend!","uid":6,"age":50,"city":"北京","province":"北京","country":"中国","address":"中国北京市朝阳区国贸","location":{"lat":"39.918256","lon":"116.467910"}}
    { "index" : { "_index" : "twitter", "_id": 6} }
    {"user":"虹桥-老吴", "DOB":"1985-01-01", "message":"好友来了都今天我生日,好友来了,什么 birthday happy 就成!","uid":7,"age":90,"city":"上海","province":"上海","country":"中国","address":"中国上海市闵行区","location":{"lat":"31.175927","lon":"121.383328"}}

    这里共有6个文档。假设检索第一页的查询如下所示:

    GET twitter/_search
    {
      "size": 2,
      "query": {
        "match": {
          "city": "北京"
        }
      },
      "sort": [
        {
          "DOB": {
            "order": "asc"
          }
        },
        {
          "user.keyword": {
            "order": "asc"
          }
        }
      ]
    }

    显示的结果为:

    {
      "took" : 29,
      "timed_out" : false,
      "_shards" : {
        "total" : 1,
        "successful" : 1,
        "skipped" : 0,
        "failed" : 0
      },
      "hits" : {
        "total" : {
          "value" : 5,
          "relation" : "eq"
        },
        "max_score" : null,
        "hits" : [
          {
            "_index" : "twitter",
            "_type" : "_doc",
            "_id" : "1",
            "_score" : null,
            "_source" : {
              "user" : "双榆树-张三",
              "DOB" : "1980-01-01",
              "message" : "今儿天气不错啊,出去转转去",
              "uid" : 2,
              "age" : 20,
              "city" : "北京",
              "province" : "北京",
              "country" : "中国",
              "address" : "中国北京市海淀区",
              "location" : {
                "lat" : "39.970718",
                "lon" : "116.325747"
              }
            },
            "sort" : [
              315532800000,
              "双榆树-张三"
            ]
          },
          {
            "_index" : "twitter",
            "_type" : "_doc",
            "_id" : "2",
            "_score" : null,
            "_source" : {
              "user" : "东城区-老刘",
              "DOB" : "1981-01-01",
              "message" : "出发,下一站云南!",
              "uid" : 3,
              "age" : 30,
              "city" : "北京",
              "province" : "北京",
              "country" : "中国",
              "address" : "中国北京市东城区台基厂三条3号",
              "location" : {
                "lat" : "39.904313",
                "lon" : "116.412754"
              }
            },
            "sort" : [
              347155200000,
              "东城区-老刘"
            ]
          }
        ]
      }
    }

    上述请求的结果包括每个文档的sort值数组。 这些sort值可以与search_after参数一起使用,以开始返回在这个结果列表之后的任何文档。 例如,我们可以使用上一个文档的sort值并将其传递给search_after以检索下一页结果:

    GET twitter/_search
    {
      "size": 2,
      "query": {
        "match": {
          "city": "北京"
        }
      },
      "search_after": [
        347155200000,
        "东城区-老刘"
      ],
      "sort": [
        {
          "DOB": {
            "order": "asc"
          }
        },
        {
          "user.keyword": {
            "order": "asc"
          }
        }
      ]
    }

    在这里在 search_after 中,我们把上一个搜索结果的 sort 值放进来。 显示的结果为:

    {
      "took" : 47,
      "timed_out" : false,
      "_shards" : {
        "total" : 1,
        "successful" : 1,
        "skipped" : 0,
        "failed" : 0
      },
      "hits" : {
        "total" : {
          "value" : 5,
          "relation" : "eq"
        },
        "max_score" : null,
        "hits" : [
          {
            "_index" : "twitter",
            "_type" : "_doc",
            "_id" : "3",
            "_score" : null,
            "_source" : {
              "user" : "东城区-李四",
              "DOB" : "1982-01-01",
              "message" : "happy birthday!",
              "uid" : 4,
              "age" : 30,
              "city" : "北京",
              "province" : "北京",
              "country" : "中国",
              "address" : "中国北京市东城区",
              "location" : {
                "lat" : "39.893801",
                "lon" : "116.408986"
              }
            },
            "sort" : [
              378691200000,
              "东城区-李四"
            ]
          },
          {
            "_index" : "twitter",
            "_type" : "_doc",
            "_id" : "4",
            "_score" : null,
            "_source" : {
              "user" : "朝阳区-老贾",
              "DOB" : "1983-01-01",
              "message" : "123,gogogo",
              "uid" : 5,
              "age" : 35,
              "city" : "北京",
              "province" : "北京",
              "country" : "中国",
              "address" : "中国北京市朝阳区建国门",
              "location" : {
                "lat" : "39.718256",
                "lon" : "116.367910"
              }
            },
            "sort" : [
              410227200000,
              "朝阳区-老贾"
            ]
          }
        ]
      }
    }

    注意:当我们使用 search_after 时,from 值必须设置为0或者-1。

    search_after 不是自由跳转到随机页面而是并行 scroll 多个查询的解决方案。 它与 scroll API 非常相似,但与它不同,search_after 参数是无状态的,它始终针对最新版本的搜索器进行解析。 因此,排序顺序可能会在步行期间发生变化,具体取决于索引的更新和删除。

    展开全文
  • Scroll API可用于从单个搜索请求中检索大量结果(甚至所有结果),这与在传统数据库上使用cursor的方式非常相似。Scroll不是用于实时用户请求,而是用于处理大量数据,例如,用于处理大量数据。 为了将一个索引的...
  • offset 先创建三个盒子,并给定样式 #box1 { width: 300px; height: 300px; background-color: rgb(190, 187, 187); margin: 50px; /*解决塌陷*/ overflow: hidden; } #box2 { width: 2
  • Android的ScrollView简单使用实例(附Demo)

    万次阅读 多人点赞 2018-08-30 23:35:40
    垂直滚动:Scroll  2.水平滚动:HorizontalScrollView Demo地址:https://github.com/zGuangYuan/Androidstudio_example  垂直滚动:Scroll 水平滚动:HorizontalScrollView  ScrollView称为...
  • QT的自动滚动区QScrollArea的用法,图文详解

    万次阅读 多人点赞 2020-09-24 17:21:44
    QScrollArea属于控件容器类,可以直接在ui中拖出来。 对于QScrollArea,最难搞懂的就是:如何控制它,才能让它在我们想要出现滚动条的时候出现滚动条。 我们拖入一个QScrollArea,再向他里面拖入4个button,...
  • 2020年10月12日真是痛苦的一天
  • better-scroll插件的介绍及使用

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

    万次阅读 2018-09-18 10:45:10
    Scroll search 请求返回一个单一的结果“页”,而 scroll API 可以被用来检索大量的结果(甚至所有的结果),就像在传统数据库中使用的游标 cursor。 滚动并不是为了实时的用户响应,而是为了处理大量的数据,例如...
  • Elasticsearch Scroll和Slice Scroll查询API使用案例 the best elasticsearch highlevel java rest api-----[url=https://my.oschina.net/bboss/blog/1942562]bboss[/url] [b]本文内容[/b] [list] [*]...
  • Better-Scroll组件解读

    千次阅读 2019-01-05 14:58:58
    介绍 Better-Scroll 组件的使用 描述:这是一篇介绍移动端使用 Better-Scroll 库的文章。
  • better-scroll 详解

    千次阅读 2019-11-18 15:39:49
    better-scroll 是什么 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。 better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,zip 后仅有9...
  • 一般搜索请求都是返回一"页"数据,无论数据量多大都一起返回给用户,Scroll API可以允许我们检索大量数据(甚至全部数据)。Scroll API允许我们做一个初始阶段搜索并且持续批量从Elasticsearch里拉取结果直到没有...
  • better-scroll 组件

    2018-11-19 11:37:49
    封装的better-scroll组件 &lt;template&gt; &lt;div&gt; &lt;div class="list-wrapper" ref="wrapper"&gt; &lt;div class="bscroll-container"&...
  • better-scroll的基本使用

    万次阅读 2019-11-25 10:43:35
    better-scroll是借鉴iscroll,是很牛的前端大神ustbhuangyi黄轶老师上传至github,并在教学视频中屡次运用的 github地址:https://github.com/ustbhuangyi/better-scroll 中文文档:Document 其方法、事件、属性...
  • elasticsearch scroll

    千次阅读 2019-11-02 21:21:52
    elasticsearch scroll 一、背景 最近有个ES 同步的需求,了解了一下子 es的分页处理的方式,本文主要讲解一下es中的scroll的分页的处理,原文链接 ...
  • Elasticsearch使用scroll进行分页查询

    万次阅读 2017-03-21 21:00:59
    之前一直使用from size进行分页查询(深度分页),当数据量大的时候,对全部数据进行遍历,使用from size性能会很差,然后了解了下scroll方法,简单讲解一下scroll方法的使用。 从网上了解到,scroll类似于数据库中...
  • 当 better-scroll 遇见 Vue

    万次阅读 2017-06-02 09:11:37
    在我们日常的移动端项目开发中, 处理滚动列表是再常见不过的需求了, 以滴滴为例,可以是这样竖向滚动的列表,如图所示: ... ...也可以是横向滚动的导航栏,如图所示: ...我们在实现这类滚动功能的时候,会用到我写...
1 2 3 4 5 ... 20
收藏数 236,075
精华内容 94,430
关键字:

scroll