精华内容
下载资源
问答
  • 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
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • <script type="text/javascript" src="jquery.js"></script> ...$(document).ready(function(){ ...试着移动滚动条,然后再次点击按钮。 注意:查看效果时不要忘记了包含jquery.js
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".btn1").click(function(){
        alert($("div").scrollTop()+" px");
      });
       $(".btn2").click(function(){
        $("div").scrollTop(100);
      });
    });
    </script>
    </head>
    <body>
    <div style="border:1px solid black;width:200px;height:200px;overflow:auto">
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    </div>
    <button class="btn1">获得 scrollbar top offset</button><br />
    <button class="btn2">把 scroll top offset 设置为 100px</button>
    <p>试着移动滚动条,然后再次点击按钮。</p>
    </body>

    </html>


    注意:查看效果时不要忘记了包含jquery.js

    展开全文
  • 假设有一个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;

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

    千次阅读 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() 方法

    展开全文
  • vue如何通过滚动条滚动来获取滚动的距离 let element = document.getElementsByClassName('el-popper')... let scrollTop = document.body.scrollTop //获取当前滚动条距离顶部的距离 console.log(scrollTop ) //
  • jquery 获取当前浏览器滚动条宽度数值
  • 原因想要做响应式设计,遇到——本来没有滚动条,缩小窗口...解决办法实时获取当前浏览所用浏览器的滚动条宽度//获取当前浏览器滚动条的宽度,原理是设置一个不可见的div,查看设置scorll前后的宽度差 function getScr
  • 获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop 获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft pageXOffset 和...
  • 没有用过vue等MVVM的框架,直接开始做小程序,没有dom操作真是各种不适应,思维有时都转换不过来想要做的...function(e){ // 获取滚动条当前位置console.log(e)},goTop: function (e) { // 一键回到顶部if (wx.pageS...
  • $('element').offset().top为元素到文档顶部距离 $(window).scrollTop() 为当前窗口滚动条的高度
  • vue获取滚动条滚动位置

    千次阅读 2019-12-11 17:10:06
    记一次踩的坑,百度的很多方法都不能用 ...我给html,body给了高度100%,获取body的滚动条位置一直是0; 给当前页面给高度100%; .beat_home{ height:100%; overflow:hidden; overflow-y:scro...
  • window.addEventListener("scroll",function(e){ var h =document.documentElement.scrollTop||document.body.scrollTop; console.log(h) if(h <...jq根据滚动条百分比不停地加载数据 $...
  • 1.获取滚动条当前位置 2.回到顶部 onPageScroll:function(e){ // 获取滚动条当前位置 console.log(e) console.log(e.scrollTop)//获取滚动条当前位置的值 }, goTop: function (e) { // 一键回到顶部 if ...
  • (一)获取滚动条当前的位置/** * 获取滚动条当前的位置 */ function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document....
  • 没有用过vue等MVVM的框架,直接开始做小程序,没有dom操作真是各种不适应,思维有时都转换不过来想要做的...function(e){ // 获取滚动条当前位置console.log(e)},goTop: function (e) { // 一键回到顶部if (wx.pageS...
  • JS获取滚动条位置

    2019-12-05 10:40:02
    如果使用jquery的话,可以这样写: $(window).bind("scroll", function(){ var top = $(this).scrollTop(); // 当前窗口的滚动距离 ... * 获取滚动条距离顶端的距离 * @return {}支持IE6 */ function get...
  • [js] 获取浏览器当前页面的滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。 主目录 与...
  • 获取当前页面的滚动条纵坐标位置,用:   document.documentElement.scrollTop;   而不是:   document.body.scrollTop;   documentElement 对应的是 html 标签,而 body 对应的是 body 标签。 ...
  • js获取滚动条位置

    千次阅读 2009-04-03 23:49:00
    IE (event.x event.y) 获取滚动条位置: document.body.scrollTop (滚动条离页面最上方的距离) document.body.scrollLeft (滚动条离页面最左方的距离) 当我用js获取当前垂直或者水平方向滚动条位置的时候...
  • 没有用过vue等MVVM的框架,直接开始做小程序,没有dom操作真是各种不适应,思维有时都转换不过来 ...onPageScroll:function(e){ // 获取滚动条当前位置 console.log(e) }, goTop: function (e) { // ...
  • scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取...
  • 最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:  一、jQuery获取的相关方法 Js代码 jquery 获取滚动条高度 获取浏览器显示区域的高度...
  • 1、获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2、滚动到指定位置 dom.scrollTop = 150; // 滚动到y轴上(竖直方向)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 781
精华内容 312
关键字:

获取当前滚动条