精华内容
下载资源
问答
  • scroll 监听

    2019-06-11 15:25:19
    项目中使用了better-scroll库,同时想监听scroll事件的时候,发现无法监听到。 setTimeout(()=>{ this.initScroll(); this.scroll.on('scroll', ()=>{console.log('scroll' , )}, false) this.scrol...

    问题描述 :
    项目中使用了better-scroll库,同时想监听scroll事件的时候,发现无法监听到。

    setTimeout(()=>{
              this.initScroll();
              this.scroll.on('scroll', ()=>{console.log('scroll' , )}, false)
              this.scroll.on('pullingUp',()=> {
           
              });
              this.scroll.on('pullingDown',()=> {
                  
              });
    },20)
    
    //  this.box  和this.scroll 指向统一元素
    this.box.addEventListener('scroll', ()=>{console.log('scroll')}, false)
    // 无法监听到事件
    

    猜测一:better-scroll 内部绑定事件前,会把之前绑定的事件取消掉。
    但是发现,把绑定事件代码加到better-scroll绑定事件代码之后 仍然不行。

    猜测二:better-scroll内部使用的是touch事件,preventDefault默认值为true,会阻止页面的默认行为。
    当把preventDefault设置为false之后,发现可以监听到滚动事件。
    但是这一修改可能会导致其他的问题,所以其实并不是很建议。

    解决方案 :
    其实better-scroll的API就可以发现,可以直接在内部注册 。

    this.scroll.on('scroll', ()=>{console.log('scroll' , )}, false)
    

    注:

    • 使用on注册事件, 同一个元素只能绑定一个scroll事件。后注册的事件会覆盖前注册的事件
    • 使用addEventListener注册事件,允许注册多个
    this.ele = document.querySelector('.scroll')
    this.ele.onscroll = ()=>{ console.log('scroll1') }
    this.ele.addEventListener('scroll',  ()=>{ console.log('scroll2') },  false)
    this.ele.onscroll = ()=>{ console.log('scroll3') }
    this.ele.addEventListener('scroll',  ()=>{ console.log('scroll4') },  false)
    
    // 滚动时 打印 scroll2   scroll3  scroll4
    
    展开全文
  • vuescroll 官网:https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#detectresize main.js import vuescroll from 'vuescroll'; // 你可以在这里设置全局配置 Vue.use(vuescroll, { ops: {}, // 在...

    vuescroll

    官网:https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#detectresize

    主要配置如下
    在data里面:

    ops: {
            vuescroll: {
              mode: "native",  //模式:pc natice 移动端是slice
              sizeStrategy: "percent",  //父元素是否是固定的是就percent 不是就是number 填一个数值
              detectResize: true,  //内容是否根据页面调整
            },
            scrollPanel: {
              initialScrollY: false,  //初始化距离顶部的位置
              initialScrollX: false,  //初始化距离左侧的位置
              scrollingX: true,  // 是否开启横向滚动
              scrollingY: true,  //是否开启竖向滚动
              speed: 300,       //多长时间内完成一次滚动。 数值越小滚动的速度越快。
              easing: 'easeInQuad', //默认动画
              verticalNativeBarPos: "right", 
              maxHeight: undefined,  //这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应,超出的话出现滚动条。
              maxWidth: undefined,   //这是滚动条最大宽度,内容宽度小于 maxWidth 时高度自适应,超出的话出现滚动条。
            },
            rail: {
              background: "#000000", //轨道的背景色。
              opacity: 0.5,            //轨道的透明度。 0是透明,1是不透明
              size: "6px",             //轨道的尺寸。
              specifyBorderRadius: false, //是否指定轨道的 borderRadius, 如果不那么将会自动设置。
              gutterOfEnds: null,
              gutterOfSide: "0px",      //距离容器的距离
              keepShow: false,          //是否即使 bar 不存在的情况下也保持显示。
            },
            bar: {
              showDelay: 500,             //在鼠标离开容器后多长时间隐藏滚动条。
              onlyShowBarOnScroll: true,  //是否只在滚动时显示 bar。
              keepShow: false,            //滚动条是否保持显示。
              background: "#ff0000",      //滚动条背景色。
              opacity: 1,                 //滚动条透明度。
              hoverStyle: false,
              specifyBorderRadius: false,  //是否指定滚动条的 borderRadius, 如果不那么和轨道的保持一致。
              minSize: false,              //为 bar 设置一个最小尺寸, 从 0 到 1. 如 0.3, 代表 30%.
              size: "6px",                 //bar 的尺寸。
              disable: false,              //是否禁用滚动条。
            },
          },
    

    main.js

    import vuescroll from 'vuescroll';
    
    // 你可以在这里设置全局配置
    Vue.use(vuescroll, {
      ops: {}, // 在这里设置全局默认配置
      name: 'vue-scroll' // 在这里自定义组件名字,默认是vueScroll
    });
    

    使用:
    在父元素-vue-scroll-子元素(内容)

    <template>
      <div class="main">
        <vue-scroll>
          <div class="main_content">
            <div class="content">
              <div class="content_title">Nginx配置文件nginx.conf中文详解</div>
              <el-row>
                <el-col :span="5">
                  <el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
                </el-col>
                <el-col :span="19">
                  <el-row>
                    <el-col>
                      <div
                        class="content_desc"
                      >######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型,[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符:数目 #工作模式与连</div>
                    </el-col>
                    <el-col>
                      <div class="content_info">
                        <i class="el-icon-date"></i>2020-8-5
                        <i class="el-icon-s-grid"></i>nginx
                        <i class="el-icon-view"></i>84
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
    
            <div class="content">
              <div class="content_title">Nginx配置文件nginx.conf中文详解</div>
              <el-row>
                <el-col :span="5">
                  <el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
                </el-col>
                <el-col :span="19">
                  <el-row>
                    <el-col>
                      <div
                        class="content_desc"
                      >######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型,[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符:数目 #工作模式与连</div>
                    </el-col>
                    <el-col>
                      <div class="content_info">
                        <i class="el-icon-date"></i>2020-8-5
                        <i class="el-icon-s-grid"></i>nginx
                        <i class="el-icon-view"></i>84
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
    
            <div class="content">
              <div class="content_title">Nginx配置文件nginx.conf中文详解</div>
              <el-row>
                <el-col :span="5">
                  <el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
                </el-col>
                <el-col :span="19">
                  <el-row>
                    <el-col>
                      <div
                        class="content_desc"
                      >######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型,[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符:数目 #工作模式与连</div>
                    </el-col>
                    <el-col>
                      <div class="content_info">
                        <i class="el-icon-date"></i>2020-8-5
                        <i class="el-icon-s-grid"></i>nginx
                        <i class="el-icon-view"></i>84
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
    
            <div class="content">
              <div class="content_title">Nginx配置文件nginx.conf中文详解</div>
              <el-row>
                <el-col :span="5">
                  <el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
                </el-col>
                <el-col :span="19">
                  <el-row>
                    <el-col>
                      <div
                        class="content_desc"
                      >######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型,[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符:数目 #工作模式与连</div>
                    </el-col>
                    <el-col>
                      <div class="content_info">
                        <i class="el-icon-date"></i>2020-8-5
                        <i class="el-icon-s-grid"></i>nginx
                        <i class="el-icon-view"></i>84
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
    
            <div class="content">
              <div class="content_title">Nginx配置文件nginx.conf中文详解</div>
              <el-row>
                <el-col :span="5">
                  <el-image src="https://i.loli.net/2020/06/05/UtTpoNXKFDQlYIL.jpg" fit="fit"></el-image>
                </el-col>
                <el-col :span="19">
                  <el-row>
                    <el-col>
                      <div
                        class="content_desc"
                      >######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型,[ debug | info | notice | warn | error | crit ] error_log /usr/local/nginx/logs/error.log info; #进程pid文件 pid /usr/local/nginx/logs/nginx.pid; #指定进程可以打开的最大描述符:数目 #工作模式与连</div>
                    </el-col>
                    <el-col>
                      <div class="content_info">
                        <i class="el-icon-date"></i>2020-8-5
                        <i class="el-icon-s-grid"></i>nginx
                        <i class="el-icon-view"></i>84
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </vue-scroll>
      </div>  
    </template>
    
    展开全文
  • scroll属性

    2017-09-07 19:01:36
    scroll属性
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .father{
    width: 100px;
    height: 200px;
    /*如果子元素超出父元素 会出现滚动条*/
    overflow: scroll;
    }
    .son{
    width: 200px;
    height: 400px;
    background-color: yellow;
    }


    </style>
    </head>
    <body>
    <div class="father">
    <div class="son">
    让他欢聚一堂木有空,二维人鱼酒桶吗二维Ruby屏幕few8u他爸妈领头人ERBGTTOP]U
    </div>

    </div>
    <button>你滚了多远</button>
    <button>你滚</button>
    </body>
    <script  src="js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript">
    //scrollTop 返回或设置子元素 向上滚动了多少
        $('button:first').on('click',function(){
        //$('.father').scrollTop()子元素向上滚得距离
        alert('儿子向上滚了'+$('.father').scrollTop()+'px,向左滚了'+$('.father').scrollLeft()+'px');
        });
        $('button:last').on('click',function(){
        $('.father').scrollTop(100).scrollLeft(50);


        });
    </script>
    </html>
    展开全文
  • better-scroll

    千次阅读 2019-12-02 13:47:22
    better-scroll

    官方文档


    1 入门demo 

    https://github.com/yuanyu1997/vue-music/tree/master/test-demo/better-scroll/demo-simple

    <div class="wrapper">
      <ul class="content">
        <li>...</li>
        <li>...</li>
        ...
      </ul>
      <!-- 这里可以放一些其它的 DOM,但不会影响滚动 -->
    </div>

    父组件: App.vue

    <template>
      <div>
        <recommend>
          <div v-for="item in recommends">
            <img :src="item.imgUrl">
          </div>
        </recommend>
      </div>
    </template>
    import Recommend from './components/Recommend.vue'
    export default {
      data() {
        return {
          // 轮播图Url
          recommends: []
        }
      },
      created() {
        this._getRecommend()
      }, methods: {
        // 获取轮播图Url
        _getRecommend() {
          this.recommends = [
            {imgUrl: 'https://img-blog.csdnimg.cn/20191202123638931.jpg'},
            {imgUrl: 'https://img-blog.csdnimg.cn/20191202123638960.jpg'},
            {imgUrl: 'https://img-blog.csdnimg.cn/20191202123638991.jpg'},
            {imgUrl: 'https://img-blog.csdnimg.cn/2019120212363924.jpg'},
            {imgUrl: 'https://img-blog.csdnimg.cn/20191202123635862.jpg'}]
        }
      },
      components: {
        Recommend
      }
    }

    子组件: Recommend.vue

    <template>
      <div class="wrapper" ref="wrapper">
        <div class="content" ref="content">
          <!--图片-->
          <slot></slot>
        </div>
      </div>
    </template>
    .wrapper
      min-height: 1px
    
      .content
        position: relative
        overflow: hidden
        white-space: nowrap
    
        .content-item
          float: left
          box-sizing: border-box
          overflow: hidden
          text-align: center
    
          img
            display: block
            width: 100%
    import BScroll from 'better-scroll'
    props: {
      // 是否循环播放
      loop: {
        type: Boolean,
        default: true
      }
    }
    mounted: function () {
      setTimeout(() => {
        this.setContentWidth()
        this.initWrapper()
      }, 20)
    }
    // 计算content的宽度
    setContentWidth: function () {
      // 获取content里的所有的子元素
      this.children = this.$refs.content.children
      // 计算宽度  = 图片个数+每张图片的宽度
      let width = 0
    
      // wrapperWidth = width+左右padding
      let wrapperWidth = this.$refs.wrapper.clientWidth
    
      for (let i = 0; i < this.children.length; i++) {
        // 获取children里的每一项内容
        let child = this.children[i]
        // 增加一个class值contet-item
        addClass(child, 'content-item')
        child.style.width = wrapperWidth + 'px'
        width += wrapperWidth
      }
      if (this.loop) {
        width += 2 * wrapperWidth
      }
      this.$refs.content.style.width = width + 'px'
    }
    // 设置宽度以后初始化wrapper
    initWrapper: function () {
      this.wrapper = new BScroll(this.$refs.wrapper, {
        // 横向滚动
        scrollX: true,
        // 纵向滚动
        scrollY: false,
    
        momentum: false,
    
        snap: true,
        // 是否循环轮播
        snapLoop: this.loop,
        snapThreshold: 0.3,
        snapSpeed: 400
      })
    }

    注意

    /* !!!清除默认样式 */
    body {
      margin: 0;
      padding: 0;
    }

    Vue.nextTick: https://cn.vuejs.org/v2/guide/reactivity.html#异步更新队列 

    https://zhuanlan.zhihu.com/p/27407024 

    <div id="test">
        <div ref='msg'>{{msg}}</div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#test',
            data: {
                msg: '666'
            },
            mounted() {
                // this.$nextTick(() => {
                //     this.msg = Math.random() * 1000 | 0
                //     alert('this.$nextTick'+this.msg)
                // })
                //改变数据
                this.msg = '999'
    
                //想要立即使用更新后的DOM。这样不行,因为设置msg后DOM还没有更新
                console.log(this.$el.textContent) // 并不会得到'999'
    
                // 方式1
                // //这样可以,nextTick里面的代码会在DOM更新后执行
                // Vue.nextTick(() => {
                //     console.log(this.$el.textContent) //可以得到'999'
                // })
    
                //方式2
                setTimeout(() => {
                    console.log(this.$el.textContent) //可以得到'999'
                }, 20)
            }
        })
    </script>

     

    展开全文
  • uniapp scroll-view scroll-top设置无效

    千次阅读 2020-06-04 13:13:49
    uniapp scroll-view scroll-top设置无效 根据需求,切换到 scroll-view 滚动区域时 滚动条回到顶部,初步尝试在切换的时候设置 this.scrollTop = 0,发现无效,一番查证: 当重复设置某些属性为相同的值时,不会...
  • better-scroll 详解

    万次阅读 2019-05-26 21:42:04
    better-scroll 是什么 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。 better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,zip 后仅有9...
  • scroll-view为滚动视图,分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块主要属性:使用演示:wxml&...
  • 开始我以为是小程序scroll-view组件scroll-y失效,查了很多网上说的都没有确切的解决掉问题 下面是我写的代码 <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{...
  • 监听scroll事件

    2019-12-27 17:35:01
    scroll事件没有冒泡阶段,因此监听scroll事件需要在捕获阶段进行。 1.用法一: document.getElementById("testScroll").addEventListener("scroll", () => { console.log("scroll ..."); }, true); 2....
  • scroll-view 中scroll-top设置无效对问题

    千次阅读 2020-03-26 15:05:34
    初次使用scroll-view 中scroll-top,结果发现没有效果,所以在网上搜了一下,发现有问题的人还挺多的,所以就在此说明一下 <scroll-view class="left-navbar" scroll-y="true"> <view wx:for="{{list}}" ...
  • table设置overflow:scroll

    万次阅读 2017-03-14 21:20:34
    table的td如何设置overflow:scroll在做项目的时候发现一个需求: 左边保持不变,右边多出来的table的td要设置为overflow:scroll,但是有个问题,就是,无论td的宽度设置为多少,它都会按照表格的百分之百来自适应,...
  • css scroll属性 CSS | 滚动行为属性 (CSS | scroll-behavior property) Who does not want their links to function smoothly and attractively? This type of functionality is very easy to implement. All you ...
  • 引用scroll-view视图容器 <scroll-view class="right-content" scroll-y scroll-top="{{backTop}}">内容</scroll-view> 在js文件中定义backtop变量 data: { // 设置每次切换分类从头开始浏览 ...
  • 大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令...import { InfiniteScroll } from 'element-ui'; Vue.use(InfiniteScroll) 好,这样引入、注册了,那么我...
  • elasticsearch scroll

    千次阅读 2019-11-02 21:20:30
    elasticsearch scroll 一、背景 最近有个ES 同步的需求,了解了一下子 es的分页处理的方式,本文主要讲解一下es中的scroll的分页的处理,原文链接 ...
  • 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] [*]...
  • Qt利用布局,widget和ScrollArea实现抽屉效果

    千次阅读 多人点赞 2020-10-03 19:11:16
    利用布局,widget和ScrollArea实现的抽屉效果如下: 思路就是将scrollArea设定为垂直布局,然后加入按钮和widget,当鼠标点击按钮后,隐藏widget,利用垂直布局,做到自然伸缩,然后为什么要使用scrollArea做容器,...
  • 出处 http://www.ghugo.com/special-scroll-events-for-jquery/ ...javascript里有一个事件是滚动事件,只要拖动滚动条,就会触发事件。...用jquery的话,这个事件scroll 可以查看...但scroll 事件有一个缺陷
  • <template> <view class="content">...scroll-view scroll-y="true" :scroll-into-view="intoindex" style="height: 300px;"> <view v-for="(item,index) in content" :key='index' :id='...
  • 看了官网scroll-left的用法,还真没看懂他的具体用法是什么。不得已大量查找资料,主要实现功能是,可以自动移动距离,配上scroll-with-animation一起用更佳。 分为两部分,主要说动态的用法,官网我只看到了静态~ ...
  • Jest scroll查询

    2019-11-27 13:05:58
    @Test public void testSerialScroll() throws IOException { BoolQueryBuilder builder = QueryBuilders.boolQuery();... SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder().size(SCROLL...
  • 组件:scroll.vue,需要先npm install better-scroll import BScroll from 'better-scroll' const DIRECTION_H = 'horizontal' const DIRECTION_V = 'vertical' export default { pr
  • 微信小程序scroll-view的scroll-into-view无效如何解决 最近在写小程序项目遇到这么一个问题:在使用scroll-into-view的时候无效。 在网上查了一遍,给出的答案有: 1.给scroll-view要设置高度,必须设置上scroll-y...
  • 一、better-scroll/原生Scroll 如何使页面滚动的 better-scroll//Scroll 均需要,且通过两层div生效,A层绑定父容器(视口固定),B层(无限延长)的子容器,才能实现滚动。 二、两者如何监测滚动条距顶部距离 1、...
  • vueScroll使用心得

    千次阅读 2019-06-21 18:12:41
    废话不多说,先上代码 ...import vuescroll from 'vuescroll' Vue.use(vuescroll) Vue.prototype.$vuescrollConfig = { vuescroll: { mode: 'native',//选择一个模式, native 或者 slide(pc&app...
  • 小程序scroll-view scroll-y 上拉加载下一页 去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片. // An highlighted block &amp;lt;scroll-view scroll-y class=&quot;aside ...
  • 小程序 scroll-view 之 scroll-into-view 使用技巧
  • 微信小程序的scroll-view的scroll-into-view属性 最近做一个项目,有个页面中需要列表展示图片,并且刚进入展示页面的时候,不是直接显示顶部,而是显示列表中指定图片的位置。正好 scroll-view 的 scroll-into-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,699
精华内容 27,079
关键字:

scroll