js获取各种浏览器宽度

最新推荐文章于 2024-01-02 07:57:42 发布

doujiao_pengpeng

最新推荐文章于 2024-01-02 07:57:42 发布

阅读量759

点赞数

重视基础知识，一步一个脚印

这是网上的一篇文章，自己写出来加深下印象。

屏幕的有效宽度

这个我发现在每个桌面浏览器上，不管窗口大小都是1366x728，就是桌面分辨率再减去桌面底部的任务栏。而手机没有任务栏，因此就是手机实际的宽度，这里手机我添加了视口约束，

window.screen.availHeight
window.screen.availWidth

实战练习

学习地址感谢分享

看到scrollTop 、scrollLeft、scrollHeight、scrollWidth的时候反复测试发现好像一直都是0，偶然发现了文字滚动效果，好像就是使用的这个，扒了下教程，大致理解了，这几个的用法。

效果就是实现文字无间隔地向上滚，鼠标经过时，停止滚动。很常见的一类效果。大致实现原理是这样的：

设置一个父盒子，里面是内容，设置你要滚动区域的高宽，基础搭好后，开始滚了，先获取父盒子id，然后设置scrollTop的值，不断加就行了，可以使用循环，人家代码是使用setInterval(函数名，间隔)，意思多长时间执行一次，然后写滚动函数，scrollTop+=1，就一直滚了。

var o=document.getElementById("scrollbox");//取父盒子
o.scrollTop=0;
  t=setInterval(scrolling,50); //设置间隔
  function scrolling(){
    o.scrollTop+=1;
  }

遇到第一个问题，我滚完了怎么办，如何能循环滚动？我们的代码是让父盒子的scrollTop一直增加，如果滚完了，把scrollTop设置为0，不就又重新开始了。那解决两个问题，一：判断什么时候滚完了，二，解决回滚时的视觉突变问题。
第一个：

这里用到scrollHeight,其实它指的就是整个盒子内容的高度，那滚一轮的高度scrollTop是多少，其实是scrollHeight-height(滚动区域高度）;也就是说当scrollTop>=scrollHeight-height;表示滚完一圈了。设置scrollTop=0，就可以重新滚动了，运行就发现不对劲了，会有视觉突变，不自然。那怎么办呢？

第二个：

为什么会产生视觉突变，是因为两次看到的画面不一样，为什么gif动图看着像视频，因为眼睛有视觉停留效应，如果我们回滚时的页面和回滚后的页面一样，眼睛就可以欺骗我们了。那就行了，设置回滚时的页面和scrollTop为0时候的页面一样，怎么一样？这里使用代码o.innerHTML+=o.innerHTML,把内容复制一遍，这样就可以滚完完整的一圈了。就是滚完复制前的内容完整的高度。这时设置scrollTop为0，欺骗成功。

var o=document.getElementById("scrollbox");
  o.innerHTML+=o.innerHTML;
  o.scrollTop=0;
  t=setInterval(scrolling,50);
  function scrolling(){
    o.scrollTop+=1;
    if(o.scrollTop>=o.scrollHeight/2)
    {o.scrollTop = 0; }
  }
  //clearInterval(t);取消滚动

但是我想让效果更好，滚完一行，暂停一会，鼠标经过，停止滚动。
第一个

判断每滚完一行，取消滚动，延时一定时间，开启滚动。

if(o.scrollTop%lh!=0){//每一行，那就是line-height的倍数
   o.scrollTop+=1;
   if(o.scrollTop>=o.scrollHeight/2) 
     {o.scrollTop = 0; }
 }
 else{
   clearInterval(t);//先停下来，延迟一定时间，再开始
   setTimeout(start,delay);
 }

但是这里有二个问题，那就是，最开始的时候0也是lh的倍数，还有，延时函数，scrolling(),已经设置间隔执行了，因此需要再绑定一个函数。start(),这样，代码如下

function start(){
      t=setInterval(scrolling,speed); //设置间隔，没50毫秒执行一次scrolling()函数
      o.scrollTop+=1;//考虑到初始值为0，要加1
    }
    function scrolling(){
        if(o.scrollTop%lh!=0){
          o.scrollTop+=1;
          if(o.scrollTop>=o.scrollHeight/2) 
            {o.scrollTop = 0; }
        }
        else{//当为60倍数时，停止。延时一定时间delay后，重启start(),值自动加1，重复循环
          clearInterval(t);
          setTimeout(start,delay);
        }
    }

第二个鼠标经过暂停。js中的鼠标滑过事件

o.onmouseover=function(){p=true;}
o.onmouseout=function(){p=false;}//鼠标离开，!p为真

function start(){//加不了1，自然停止，
    t=setInterval(scrolling,speed); 
    if(!p){o.scrollTop+=1;}
}

实战代码整理


<style>
  *{margin:0;padding:0;}
  h1,p{text-align: center;}
  .scrollbox{height:120px;line-height: 60px;margin:30px auto;text-align: center;font-size:40px;overflow: hidden;}
  .scrollbox ul{list-style: none;}
</style>

<body>
    <h1>晓出静慈寺送林子方</h1>
    <p>杨万里</p>
    <div class="scrollbox" id="scrollbox1">
      <ul>
        <li>毕竟西湖六月中，风光不与四时同。</li>
        <li>接天莲叶无穷碧，映日荷花别样红。</li>
      </ul>
    </div>
</body>
<script>
window.onload=function(){
  function scrolljs(lh,speed,delay,index){//行高，速度，停留时间，父盒子id索引。
    var t,p=false;
    var o=document.getElementById("scrollbox"+index);
    o.innerHTML+=o.innerHTML;
    o.onmouseover=function(){p=true;}
    o.onmouseout=function(){p=false;}
    o.scrollTop=0;
    function start(){
      t=setInterval(scrolling,speed); //设置间隔
      if(!p){o.scrollTop+=1;}
    }
    function scrolling(){
        if(o.scrollTop%lh!=0){
          o.scrollTop+=1;
          if(o.scrollTop>=o.scrollHeight/2) 
            {o.scrollTop = 0; }
        }
        else{
          clearInterval(t);
          setTimeout(start,delay);
        }
    }
    start();//这里我看人家的是setTimeout(start,delay)，想到scrolling()50秒执行一次，再转到else的setTimeout(),也一样了
  }
  scrolljs(60,30,300,1);//使用时记得父盒子命名为scrollbox+索引值即可
}
</script>

总结

本来想再添加一个参数的，就是方向参数，然后if判断，但是获取id值时一直出错，比如父盒子id是scrollbox,scrolljs();里index,传的也是这个，但是getElementById时，一直获取不到，我试了转义字符也不行，而且传递方向参数时，scrollTop也得不到。偷懒的我就没再想了，想出来了，虽然调用简单，但其实代码更复杂了，就没搞了

"\""+index+"\""
"scroll"+dir

doujiao_pengpeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取各种浏览器宽度

重视基础知识，一步一个脚印这是网上的一篇文章，自己写出来加深下印象。屏幕的有效宽度这个我发现在每个桌面浏览器上，不管窗口大小都是1366x728，就是桌面分辨率再减去桌面底部的任务栏。而手机没有任务栏，因此就是手机实际的宽度，这里手机我添加了视口约束，window.screen.availHeightwindow.screen.availWidth实战练习学习地址感谢分享看到scrol
复制链接

扫一扫