精华内容
下载资源
问答
  • 1:vue将搜索栏定位到...2:vue触发滚动条事件,获取当前滚动条位置 思路:scroll在哪儿个组件内,就在获取那个dom元素。网上好多思路是  window.addEventListener("scroll", function(){  console.l...

    1:vue将搜索栏定位到轮播图上方
    position: fixed;
    z-index: 999;//控制header部分固定

     

    2:vue触发滚动条事件,获取当前滚动条位置

    思路:scroll在哪儿个组件内,就在获取那个dom元素。网上好多思路是

        window.addEventListener("scroll", function(){
                console.log('scrolling');
              });

    这是监听不到的!如果你整个网页可以滑动,或许还可以试试!

    对于像我这样,只在页面的内的一个div内要监听的。实现代码如下:
    第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素
    <!--设备列表-->
    <div class="deviceWrapper" ref="viewBox">
      <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"/>
      <div class="demo-grid">
        <!--设备列表 手机一行两列 pad一行4列-->
        <mu-row>
          <mu-col v-for="device in devicesList" width="50" tablet="25" desktop="25">
            <deviceCardView :device-data="device""></devicelightCardView>
          </mu-col>
        </mu-row>
      </div>
      <p class="bottomLine" v-bind:class="{bottomLineVisible:isScroll}">---------------------我是有底线的---------------------</p>
    </div>
    第二步:
    mounted() {
    // 通过$refs获取dom元素
      this.box = this.$refs.viewBox
      // 监听这个dom的scroll事件
      this.box.addEventListener('scroll', () => {
        console.log(" scroll " + this.$refs.viewBox.scrollTop)
        //以下是我自己的需求,向下滚动的时候显示“我是有底线的(类似支付宝)”
        this.isScroll=this.$refs.viewBox.scrollTop>0
      }, false)
    }
    ps:具体怎么做,看需求了。只要能打印出来.scrollTop就行了
    ---------------------
    作者:SandyoneU1993
    来源:CSDN
    原文:https://blog.csdn.net/sandyoneu1993/article/details/79421277
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • 获取滚动条当前位置

    千次阅读 2018-09-30 23:49:38
    获取滚动条当前位置 scrollTop() 方法

    获取滚动条当前位置 scrollTop() 方法

    问题描述

    ul 列表定时轮播滚动,当滚动到最后一个 li 后,重新回到顶部重新开始自动滚动。

    测试发现当滚动条目较小时,即 li 的总高度小于设置的滚动最大值,
    轮播到最后一条记录后,轮播滚动效果停止。

    解决方法

    判断当前列表播放时当前的高度(height)值和滚动条位置的高度值,如果大于滚动条位置高度值则重新开始。

    <div style="border:1px solid black;width:200px;height:200px;overflow:auto">
    <ul class="ul" id="testList" >
    	  <li>This is 1 item. </li>
    	  <li>This is 2 item. </li>
    	  <li>This is 3 item. </li>
    	  <li>This is 4 item. </li>
    	  <li>This is 5 item. </li>
    	  <li>This is 6 item. </li>
    	  <li>This is 7 item. </li>
    	  <li>This is 8 item. </li>
    	  <li>This is 9 item. </li>
    	  <li>This is 10 item. </li>
    	</ul>
    </div>
    
    <script type="text/javascript">
      $(function(){
        var scrollItemHeight = 0;
        // 滚动条当前位置
        var scrollOffset = 0;
        // li 列表总高度
        var totalLiHeight = ($(".ul li").length)*($(".ul li").eq(0).height()) - 5;
        // 自动滚动效果
        function autoScroll() {
          scrollItemHeight += 20;
          scrollOffset = 20+$(".ul").scrollTop();
          // 如果有拖动滚动条,则从拖动后的位置开始滚动
          if(scrollItemHeight != scrollOffset){
            scrollItemHeight = scrollOffset;
          }
          if(scrollItemHeight > totalLiHeight) {
            scrollItemHeight = 0;
            scrollOffset = 0;
          }
          $(".ul").animate({scrollTop: scrollItemHeight}, 1000); // 1000ms 为列表移动速度
       }
       setInterval("autoScroll", 2000);
    });
    
    </script>	
    


    参考:
    jQuery CSS 操作 - scrollTop() 方法

    展开全文
  • 前言记录一下获取滚动条相对距离和绝对距离的方法说明(个人理解)相对距离当前滚动条到父滚动条的距离绝对距离当前滚动条到页面顶部的位置实例1.获取当前组件DOM标签滚动条位置// 为保证DOM节点加载完毕,要在 ...

    前言

    记录一下获取滚动条相对距离和绝对距离的方法

    说明(个人理解)

    相对距离

    当前滚动条到父滚动条的距离

    绝对距离

    当前滚动条到页面顶部的位置

    实例

    1.获取当前组件DOM标签滚动条位置

    // 为保证DOM节点加载完毕,要在 mounted 中实现

    // 使用 $refs 获取DOM实例,以 tree 为例

    mounted() {

    this.$refs.tree.addEventListener('scroll', e => {

    console.log('父滚动条到页面顶部距离', e.target.offsetTop)

    console.log('相对距离', this.$refs.tree.scrollTop)

    console.log('绝对距离', e.target.offsetTop + this.$refs.tree.scrollTop)

    }, false)

    }

    2.获取子组件DOM标签滚动条位置

    mounted() {

    this.$refs.tree.$el.addEventListener('scroll', e => {

    console.log('父滚动条到页面顶部距离', e.target.offsetTop)

    console.log('相对距离', this.$refs.tree.$el.scrollTop)

    console.log('绝对距离', e.target.offsetTop + this.$refs.tree.$el.scrollTop)

    }, false)

    },

    总结

    当使用 $refs 获取DOM实例时,如果加在当前组件DOM节点上,则获取的是DOM实例。如果加在子组件上,则获取的是子组件实例,可以再使用 $el 获取到组件实例对应的DOM实例

    展开全文
  • 假设有一个div#test,滚动高度200px,div内容高度...【获取div#test当前滚动值】 document.getElementById('code').scrollTop; 【设置div#test滚动条高度值】 document.getElementById('code').scrollTop=100; ...

    假设有一个div#test,滚动高度200px,div内容高度1000px

    【获取div#test滚动条高度值】

    document.getElementById('code').scrollHeight;

    【获取div#test当前滚动值】

    document.getElementById('code').scrollTop;

    【设置div#test滚动条高度值】

    document.getElementById('code').scrollTop=100;

    展开全文
  • JS:top.location.href 顶级窗口的地址this.location.href 当前窗口的地址PHP实现#测试网址: &nbspjavascript实现:top.location.href顶级窗口的地址this.location.href当前窗口的地址PHP实现#测试网址javascript...
  • 原因想要做响应式设计,遇到——本来没有滚动条,缩小窗口...解决办法实时获取当前浏览所用浏览器的滚动条宽度//获取当前浏览器滚动条的宽度,原理是设置一个不可见的div,查看设置scorll前后的宽度差 function getScr
  • listview控件列头固定以后怎么得到当前滚动的距离?怎么获得当前listview滚动条的位置呢?
  • jquery 获取当前浏览器滚动条宽度数值
  • 获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop 获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft pageXOffset 和...
  • 本篇文章给大家带来的内容是关于js如何来实现获取滚动条宽度(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。思路:通过创建一个元素,不要给元素设置边框,然后给元素设置overflowY:...
  • 获取滚动条位置

    2021-06-28 14:27:56
    浏览器获取滚动条位置一、各浏览器下 scrollTop的差异(1)、IE6/7/8:(2)、IE9及以上:(3)、Safari(苹果公司研发的网络浏览器):(4)、Firefox(火狐):(5)、Chrome(谷歌):二、获取滚动条纵向位置的值(1)、可以使用...
  • window.addEventListener("scroll",function(e){ var h =document.documentElement.scrollTop||document.body.scrollTop; console.log(h) if(h <...jq根据滚动条百分比不停地加载数据 $...
  • vue如何通过滚动条滚动来获取滚动的距离 let element = document.getElementsByClassName('el-popper')... let scrollTop = document.body.scrollTop //获取当前滚动条距离顶部的距离 console.log(scrollTop ) //
  • window.pageXOffset/pageYOffset x轴/y轴 滚动距离 IE8及以下不兼容 IE8 及以下浏览器 支持 兼容性比较混乱 用时取2个值相加,因为两个值不可能同时存在 一个存在,另一个必然为0 ...封装 兼容滚动条...
  • (一)获取滚动条当前的位置/** * 获取滚动条当前的位置 */ function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document....
  • 1.获取滚动条当前位置 2.回到顶部 onPageScroll:function(e){ // 获取滚动条当前位置 console.log(e) console.log(e.scrollTop)//获取滚动条当前位置的值 }, goTop: function (e) { // 一键回到顶部 if ...
  • 最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:  一、jQuery获取的相关方法 Js代码 jquery 获取滚动条高度 获取浏览器显示区域的高度...
  • 准确取得当前滚动条的位置,正确的使用方法是:  document.documentElement.scrollTop:垂直方向  document.documentElement.scrollLeft:水平方向
  • $('element').offset().top为元素到文档顶部距离 $(window).scrollTop() 为当前窗口滚动条的高度
  • webbrowser滚动条位置

    2017-09-26 14:43:02
    获取webbrowser滚动条当前位置,并可以自由设置滚动条位置。用c#语言编写,可以运行。获取webbrowser滚动条当前位置,并可以自由设置滚动条位置。用c#语言编写,可以运行。
  • [js] 获取浏览器当前页面的滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。 主目录 与...
  • vue获取滚动条滚动位置

    千次阅读 2019-12-11 17:10:06
    记一次踩的坑,百度的很多方法都不能用 ...我给html,body给了高度100%,获取body的滚动条位置一直是0; 给当前页面给高度100%; .beat_home{ height:100%; overflow:hidden; overflow-y:scro...
  • 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器的写法 IE6/7/8 document.documentElement.scrollTop IE9以上 window....
  • 网上大部分vue的滚动条操作是监听dom实现,我是用@scroll实现 首先有滚动条的div一定要设固定高度,然后overflow:auto;出现滚动条 passive是使滚动更加流畅,减少卡顿 <div @scroll.passive="getScroll($...
  • 这里写自定义目录标题jq获取滚动条滚动的高度 jq获取滚动条滚动的高度 场景:为了实现div滚动到一定的位置时,变成悬浮顶部的效果 var win=$(window); //得到窗口对象 var sc=$(document);//得到document文档对象...
  • 这又是一个浏览器兼容问题,解决IE火狐Operal多浏览器 获取当前Div所在的滚动条高度。
  • 获取div滚动条滚动到底部的事件 关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全、正确搞明白的。  我知道很多人不同意我的观点。但是如果去百度上搜素,与 jQuery 滚动条有关的信息,都是...
  • js获取滚动条的高度

    万次阅读 2018-09-10 14:09:45
    浏览器获取滚动条高度的方法 浏览器 API IE6/7/8 document.documentElement.scrollTop IE9及以上 window.pageYOffset 或者 document.documentElement.scrollTop Safari window.pageYOffset或者...
  • h5获取滚动条位置

    2020-10-29 17:11:30
    h5获取滚动条位置 在mounted函数中调用 window.onscroll = function () { //变量scrollTop是滚动条滚动时,距离顶部的距离 var scrollTop = document.documentElement.scrollTop ||document.body.scrollTop; //...
  • 获取当前页面的滚动条纵坐标位置,用:   document.documentElement.scrollTop;   而不是:   document.body.scrollTop;   documentElement 对应的是 html 标签,而 body 对应的是 body 标签。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 101,701
精华内容 40,680
关键字:

获取当前滚动条