原生JS实现自定义滚动条效果,Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

开荒进取滑动隐藏尾巴部分悬浮框,向下滑动呈现悬浮框。使用pc端浏览器查看请把浏览器设置为手提式有线电话机浏览器形式。

本文实例讲述了js完成分享到随页面滚动而滑行效果的艺术。分享给大家供我们参考。具体如下:

正文实例为我们享受了JS达成自定义滚动条的求实代码,供我们参照他事他说加以侦查,具体内容如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>手机端触屏手指滑动方向</title>
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no,maximum-scale=1.0" id="viewport" name="viewport">
<script type="text/javascript">
var currntY = 0;
var lastY = 0;
var touch_screen = {
   //方向
  direction: {
 direction: "",
 object: null,

 start: function() {
      var self = this,
        obj = self.object;
      obj.addEventListener('touchstart', function(e) {
        self.move();
      }, false);
      obj.addEventListener('touchend', function(e) {
  //self.move(); 
  lastY = document.body.scrollTop; 
      }, false);
    },
    //拖动滑动时
    move: function() {
      var self = this;   
   self.object.addEventListener('touchmove', function(e) {
  currntY = document.body.scrollTop;
        var direct = currntY - lastY;

        if (direct > 0) {
          self.direction = "down";
    document.getElementById("nav").style.visibility="hidden";//隐藏
  } else if (direct < 0) {
    self.direction = "up";
    document.getElementById("nav").style.visibility="visible";//显示
  } 

  if(currntY == 0){
    self.direction = "top";
  } else if((currntY + window.screen.availHeight) == document.body.clientHeight){
    self.direction = "bottom";
    document.getElementById("nav").style.visibility="visible";//显示
  }

        document.getElementById('nav').innerHTML= self.direction;
        //document.getElementById('nav').innerHTML= currntY + "|" + window.screen.availHeight + "|" + document.body.clientHeight;
  lastY = document.body.scrollTop;
      }, false);      
    },

    //通过一个dom对象进行初始化
    init: function(a) {
      var class_clone = function(source) { 
        var result={};
        for (var key in source) {
          result[key] = typeof source[key]==="object" ? class_clone(source[key]) : source[key];
        } 
        return result; 
      }
      var self = class_clone(touch_screen.direction);
      self.object = document.getElementById(a);
      if (!self.object) {
        alert('bind_object is not an object');
        return false;
      }
      self.start();
    }
  }
}

//页面加载完成
window.onload = function() {
  touch_screen.direction.init("inner");
}
</script>

<style> 
  * {margin: 0; padding: 0;}  
  #outer{ width:90%; height: 100%; background: #000; margin: auto; overflow: hidden;}  
  #inner{width:80%; background: #e4e4e4; margin: auto; position:relative; top:0px; font-size: 1em; padding: 30px 10px; }  
  #inner p{line-height: 30px; letter-spacing: 3px; text-indent:2em;} 
  #nav { width:100%; height: 50px; border: 1px solid #D4CD49; background: #947674;text-align: center; position:fixed;left:0;bottom:0; } 
  #nav2 { width:100%; height: 50px; border: 1px solid #D4CD49;background: #947674;} 
  h2{ width: 100%; text-align: center; }  
  h3{ width: 100%; padding-left:60%;}  
</style> 
</head>

<body>
<div id="spText2"></div> 
  <div id="outer"> 
    <div id="inner"> 
      <h2>背影</h2> 
      <h3>—朱自清</h3> 
            <p>我与父亲不相见已二年余了,我最不能忘记的是他的背影。 
    那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子。我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说:“事已如此,不必难过,好在天无绝人之路!”  
    回家变卖典质,父亲还了亏空;又借钱办了丧事。这些日子,家中光景很是惨淡,一半为了丧事,一半为了父亲赋闲。丧事完毕,父亲要到南京谋事,我也要回北京念书,我们便同行。 
    到南京时,有朋友约去游逛,勾留了一日;第二日上午便须渡江到浦口,下午上车北去。父亲因为事忙,本已说定不送我,叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房,甚是仔细。但他终于不放心,怕茶房不妥帖;颇踌躇了一会。其实我那年已二十岁,北京已来往过两三次,是没有什么要紧的了。他踌躇了一会,终于决定还是自己送我去。我再三回劝他不必去;他只说:“不要紧,他们去不好!” 
    我们过了江,进了车站。我买票,他忙着照看行李。行李太多了,得向脚夫行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分,总觉他说话不大漂亮,非自己插嘴不可,但他终于讲定了价钱;就送我上车。他给我拣定了靠车门的一张椅子;我将他给我做的紫毛大衣铺好座位。他嘱咐我路上小心,夜里要警醒些,不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂;他们只认得钱,托他们只是白托!而且我这样大年纪的人,难道还不能料理自己么?  
    我说道:“爸爸,你走吧。”他望车外看了看,说:“我买几个橘子去。你就在此地,不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台,须穿过铁道,须跳下去又爬上去。父亲是一个胖子,走过去自然要费事些。我本来要去的,他不肯,只好让他去。我看见他戴着黑布小帽,穿着黑布大马褂,深青布棉袍,蹒跚地走到铁道边,慢慢探身下去,尚不大难。可是他穿过铁道,要爬上那边月台,就不容易了。他用两手攀着上面,两脚再向上缩;他肥胖的身子向左微倾,显出努力的样子。这时我看见他的背影,我的泪很快地流下来了。我赶紧拭干了泪。怕他看见,也怕别人看见。我再向外看时,他已抱了朱红的橘子往回走了。过铁道时,他先将橘子散放在地上,自己慢慢爬下,再抱起橘子走。到这边时,我赶紧去搀他。他和我走到车上,将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土,心里很轻松似的。过一会儿说:“我走了,到那边来信!”我望着他走出去。他走了几步,回过头看见我,说:“进去吧,里边没人。”等他的背影混入来来往往的人里,再找不着了,我便进来坐下,我的眼泪又来了。 
    近几年来,父亲和我都是东奔西走,家中光景是一日不如一日。他少年出外谋生,独力支持,做了许多大事。哪知老境却如此颓唐!他触目伤怀,自然情不能自已。情郁于中,自然要发之于外;家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年不见,他终于忘却我的不好,只是惦记着我,惦记着我的儿子。 
    我北来后,他写了一信给我,信中说道:“我身体平安,惟膀子疼痛厉害,举箸提笔,诸多不便,大约大去之期不远矣。”我读到此处,在晶莹的泪光中,又看见那肥胖的、青布棉袍黑布马褂的背影。唉!我不知何时再能与他相见! </p> 
<div id="nav" style="color:#F00; font-size:35px"></div>
    </div> 
  </div> 
<div id="nav2" ></div>
</body>
</html>

页面向上向下滚动,分享到的模块随着滑动。

兑现思路:

如上那篇Js判别H伍上下滑动方向及滑动到顶上部分和尾巴部分判别的示范代码正是作者分享给大家的全部内容了,希望能给咱们叁个参阅,也盼望大家多多襄助脚本之家。

要点:

一.外层设置一个div,在外围的div里面安装三个专程高的div(中度为外层七个div的莫斯中国科学技术大学学),在高的div里面安装伍个div,各类div的可观,都和父级的可观壹致
二.在外层div的右边手边框以里自定义3个滚动条,(本身用div设置样式作为滚动条)
三.最外层的div加多onmousewheel事件,使用e.wheelDelta来获得每一次滑动的离开,若为正数则升高滑动,将每回扩张的数,赋给滚动条的top值,若为负数则向下互相,将每一回减少的值,赋值给滚动条的top值,并对特意高的div作对应的内外移动处理
四.小心:滚动条的惊人供给和高的div的可观成比例滑动

您也许感兴趣的文章:

  • js决断滚动条是还是不是已到页面最尾部或顶端实例
  • 判定滚动条到底层的JS代码
  • js
    原生判定内容区域是还是不是滚动到底层的实例代码
  • jquery
    决断滚动条达到了底层和上边的措施
  • JS达成判别滚动条滚到页面尾部并推行事件的方法

复制代码 代码如下:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>自定义滚轮事件</title> 
    <style type="text/css"> 
      *{ 
        padding: 0; 
        margin: 0; 
      } 
      #wrap{ 
        height: 500px; 
        width: 300px; 
        position: relative; 
        /*超出隐藏*/ 
        overflow: hidden; 
        margin: 200px auto 0; 
        border: 3px solid black; 
      } 
      #content{ 
        width: 300px; 
        /*不需要设置高度,可被图片撑开*/ 
        position: absolute; 
        left: 0; 
        top: 0; 
        border: 1px solid red; 
      } 
      #content > div{ 
        width: 294px; 
        /*去除图片间的间隙*/ 
        vertical-align: top; 
        height: 500px; 
        border: 1px solid red; 
        text-align: center; 
        font-size: 100px; 
        line-height: 500px; 
      } 
      #sliderWrap{ 
        height:100% ; 
        width:16px ; 
        background-color: greenyellow; 
        position: absolute; 
        right: 0; 
        top: 0; 
      } 
      #slider{ 
        width: 10px; 
        height: 50px; 
        background-color: blue; 
        position: absolute; 
        left: 3px; 
        top: 0px; 
        border-radius: 10px; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="wrap"> 
      <div id="content"> 
        <div>1</div> 
        <div>2</div> 
        <div>3</div> 
        <div>4</div> 
        <div>5</div> 
      </div> 
      <!--右侧滚动条部分--> 
      <div id="sliderWrap"> 
        <div id="slider"> 

        </div> 
      </div> 
    </div> 
  </body> 
  <script type="text/javascript"> 
    var wrapDiv = document.getElementById("wrap"); 
    var contentDiv = document.getElementById("content"); 
    var sliderWrap = document.getElementById("sliderWrap"); 
    var slider = document.getElementById("slider"); 
    //设置比例 
    //clientHeight - 不包括border 
    var scale = wrapDiv.clientHeight / contentDiv.clientHeight; 
    //设置滑块的高度 
    var h1 = sliderWrap.clientHeight * scale; 
    //为了合理设置高度,设置滑块的最小高度 
    if (h1 < 50) { 
      h1 = 50; 
    }else if (scale >= 1) { 
      //说明当前内容能过完全显示在可视区域内,不需要滚动条 
      sliderWrap.style.display = "none"; 
    } 
    //设置滑块的高度 
    slider.style.height = h1 +"px"; 
    //设置y轴的增量 
    var y = 0; 
    //为wrap添加滚轮事件 
    wrapDiv.onmousewheel = function(e){ 
      var event1 = event || e 
      if (event.wheelDelta < 0) { 
        //滑动条向下滚动 
        y += 10; 
      }else if (event.wheelDelta > 0) { 
        //滑动条向上滚动 
        y -= 10; 
      } 
      //y变化时说明在滚动,此时使滚动条发生滚动,以及设置content内容部分滚动 
      //判断极端情况,滑块不能划出屏幕 
      if (y <= 0) { 
        //滑块最多滑到顶部 
        y = 0; 
      } 
      if(y >= sliderWrap.clientHeight - slider.clientHeight){ 
        //滑块最多滑到最底部 
        y = sliderWrap.clientHeight - slider.clientHeight; 
      } 
      //更新滑块的位置 
      slider.style.top = y +"px"; 
      scale = wrapDiv.clientHeight / contentDiv.clientHeight; 
      contentDiv.style.top = - y / scale +"px"; 
    } 
  </script> 
</html> 

var scrtop
=document.documentElement.scrollTop||document.body.scrollTop;
var height =
document.documentElement.clientHeight||document.body.clientHeight;
var top = scrtop + (height – jb51.offsetHeight)/2;
www.bifa88.com,top = parseInt(top);

如上正是本文的全体内容,希望对大家的读书抱有协助,也指望我们多多扶助脚本之家。

获得页面垂直居中的地方
 
上代码:

你大概感兴趣的文章:

  • js/jquery获取浏览器窗口可视区域高度和幅度以及滚动条中度达成代码
  • 剖断滚动条到底层的JS代码
  • js滚动条回来顶上部分的代码
  • JS落成判定滚动条滚到页面尾部并实行事件的方法
  • js操作滚动条事件实例
  • 当滚动条滚动到页面尾部自动加载扩张内容的js代码
  • JS
    JQUEPAJEROY完结滚动条自动滚到底的艺术
  • JS和JQUEPAJEROY获取页面大小,滚动条地方,成分位置(示例代码)
  • js监听滚动条滚动事件使得某些标签内容平素位于同一人置
  • js判定滚动条是还是不是已到页面最尾部或最上端实例
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0; font:12px/1.5 arial; height:2000px;}
#jb51{width:100px; height:200px; line-height:200px;
text-align:center; border:1p solid #ccc;
background:#f5f5f5; position:absolute; left:-100px; top:0;}
#jb51_tit{position:absolute; right:-20px; top:60px;
width:20px; height:60px; padding:10px 0;
background:#06c; text-align:center;
line-height:18px; color:#fff;}
</style>
<script>
window.onload = function(){
 var jb51 = document.getElementById("jb51");
 jb51.onmouseover = function(){
 startrun(jb51,0,"left")
 }
 jb51.onmouseout = function(){
 startrun(jb51,-100,"left")
 }
 window.onscroll = window.onresize = function(){
 var scrtop=document.documentElement.scrollTop||document.body.scrollTop;
 var height=document.documentElement.clientHeight||document.body.clientHeight;
 var top = scrtop + (height - jb51.offsetHeight)/2;
 top = parseInt(top);
 startrun(jb51,top,"top")
 }
}
var timer = null
function startrun(obj,target,direction){
 clearInterval(timer);
 timer = setInterval(function(){
 var speed = 0;
 if(direction == "left"){
  speed = (target-obj.offsetLeft)/8;
  speed = speed>0?Math.ceil(speed):Math.floor(speed);
  if(obj.offsetLeft == target){
  clearInterval(timer);
  }else{
  obj.style.left = obj.offsetLeft + speed + "px";
  }
 }
  if(direction == "top"){
  speed = (target-obj.offsetTop)/8;
  speed = speed>0?Math.ceil(speed):Math.floor(speed);
  if(obj.offsetTop == target){
  clearInterval(timer);
  }else{
  obj.style.top = obj.offsetTop + speed + "px";
  }
  document.title = obj.offsetTop + ',' + target + ',' +speed;
 }
 },30)
}
</script>
</head>
<body>
<div id="jb51">
 分享到内容
 分享到
</div>
</body>
</html>

可望本文所述对我们的javascript程序设计有所协助。

你大概感兴趣的篇章:

  • JS达成部分HTML固定页面最上端随屏滚动作效果应
  • js完结滚动条滚动到页面尾巴部分继续加载
  • 消除js页面滚动作效果应scrollTop在FireFox与Chrome浏览器间的包容难题的方式
  • JS完毕的页面自定义滚动条效果
  • 基于AngularJS达成页面滚动到底自动加载数据的成效
  • JS判别页面是还是不是出现滚动条的措施
  • JS达成决断滚动条滚到页面尾部并实践事件的方式
  • js推断滚动条是不是已到页面最尾巴部分或最上部实例
  • js,jquery滚动/跳转页面到钦定地点的贯彻思路
  • js完成刷新页面后回到记录时滚动条的地方【二种方案可选】
  • js达成页面刷新滚动条地方不改变
  • js阻止移动端页面滚动的三种艺术