scroll系列

時間  2019-11-17
標籤 scroll 系列 简体版
原文   原文鏈接

1.scrollTop是指當前盒子滾動條上面的高度,而clientHeight是指當前盒子一屏幕的高度,而後整個盒子的所有高度是scrollHeight,那麼屏幕外的全部高度是scrollHeight-clientHeight,仔細想下,scrollTop的最大值也是這個,最小值是0javascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box{
      width: 100px;
      height: 100px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
<div id="box">
   escape() 方法生成新的由十六進制轉義序列替換的字符串。escape 函數是全局對象的屬性. 特點字符如: @*_+-./ 被排除在外。字符的16進制格式值,當該值小於等於0xFF時,用一個2位轉移序列: %xx 表示。大於的話則使用4位序列:%uxxxx 表示。

該特性已經從 Web 標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在將來的某個時間中止支持，請儘可能不要使用該特性。

看看例子吧：

JavaScript 代碼:
escape('abc123');     // "abc123"
escape('äöü');        // "%E4%F6%FC"
escape('ć');          // "%u0107"
 
// special characters
escape('@*_+-./');    // "@*_+-./"
 
escape('~!@#$%^&*(){}[]=:/,;?+\'"\\')  
//%7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C
encode 方法：

encodeURI() 是對統一資源標識符（URI）進行編碼的方法。它使用1到4個轉義序列來表示每一個字符的UTF-8編碼（只有由兩個代理字符區組成的字符才用四個轉義字符編碼）。
繼續閱讀 →
</div>
  <script>
  var box = document.getElementById("box");
  console.log(box.clientHeight); // 83
  console.log(box.scrollHeight); // 1387
  console.log(box.scrollTop); // 0
  console.log(box.scrollHeight-box.clientHeight); // 1304
  // 滾動條滾動到底部在控制檯輸入box.scrollTop,是等於box.scrollHeight-box.clientHeight
  </script>
</body>
</html>

 

2.回到頂部,即scollTop=0,用動畫的形式html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #box {
    width: 100px;
    height: 100px;
    overflow-y: scroll;
  }
  #btn{
    display: none;
  }
  </style>
</head>

<body>
  <div id="box">
    escape() 方法生成新的由十六進制轉義序列替換的字符串。escape 函數是全局對象的屬性. 特點字符如: @*_+-./ 被排除在外。字符的16進制格式值,當該值小於等於0xFF時,用一個2位轉移序列: %xx 表示。大於的話則使用4位序列:%uxxxx 表示。 該特性已經從 Web 標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在將來的某個時間中止支持，請儘可能不要使用該特性。 看看例子吧： JavaScript 代碼: escape('abc123'); // "abc123" escape('äöü'); // "%E4%F6%FC" escape('ć'); // "%u0107" // special characters escape('@*_+-./'); // "@*_+-./" escape('~!@#$%^&*(){}[]=:/,;?+\'"\\') //%7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C encode 方法： encodeURI() 是對統一資源標識符（URI）進行編碼的方法。它使用1到4個轉義序列來表示每一個字符的UTF-8編碼（只有由兩個代理字符區組成的字符才用四個轉義字符編碼）。 繼續閱讀 →
  </div>
  <a href="javascript:;" id="btn">回頂</a>
  <script>
  var box = document.getElementById("box");
  console.log(box.clientHeight); // 83
  console.log(box.scrollHeight); // 1387
  console.log(box.scrollTop); // 0
  console.log(box.scrollHeight - box.clientHeight); // 1304
  // 滾動條滾動到底部在控制檯輸入box.scrollTop,是等於box.scrollHeight-box.clientHeight

  var btn = document.getElementById("btn");
  // 當scrollTop>一屏時顯示按鈕,不然不顯示
  box.onscroll = btnIsShow;
  function btnIsShow (e) {
    e = e || window.event;
    e.target = e.target || e.srcElement;
    btn.style.display = e.target.scrollTop>e.target.clientHeight?"block":"none";
  }
  btn.onclick = function() {
    //點擊按鈕的時候,按鈕消失
    this.style.display = "none";
    // 由於btnIsShow的事件觸發,因此,必須解綁
    box.onscroll = null;
    // box.scrollTop = 0;
    // 總時間t 總距離s
    // 每隔interval移動一次,總共移動 n=t/interval次,每次移動的具體就是 step=s/n
    // 每移動一次,走過的距離就會 +step
    var t = 500,
      target = 0,
      s = box.scrollTop - 0,
      interval = 10,
      n = t / interval,
      step = s / n;
      var timer = window.setInterval(function() {
        box.scrollTop -= step;
        if (box.scrollTop <= target) {
          box.scrollTop = target;
          window.clearTimeout(timer);
          // 再次綁定btnIsShow
          box.onscroll = btnIsShow;
        }
      }, interval)
  }
  </script>
</body>
</html>

 

 

3.跑馬燈,單行文字在某個盒子裏,橫向循環滾動java

  1. 首先寫個有單行文字在某個盒子裏有橫向滾動條的demo 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            width: 300px;
            overflow-x: auto; // 滾動條
            white-space: nowrap; // 保證是單行文字
        }
    </style>
</head>
<body>
    <p>
  Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.
</p>
</body>
</html>

     

　　2.demo1的滾動條去掉,可是改變scollLeft的值還能看到其餘的內容,上面的overflow-x:auto換成overflow:hidden瀏覽器

　　3.美化下加個邊框什麼的app

　　

p {
    width: 300px;
    /*overflow-x: auto;*/
    overflow: hidden;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px dashed #f69;
  }

可是發現,右邊的padding-right無效,怎麼纔能有效呢函數

就是再套個div,給div一個padding值 => 發現border還緊貼着,而後把border也丟給div => 發現div太大了,因而拋給它一個寬度,這樣的話p就不用,由於會默認繼承動畫

 

 

 

p{
      margin: 0;
      padding: 0;
  }
  div {
    padding-left: 10px;
    padding-right: 10px;
    border: 1px dashed #f69;
    width: 300px;
  }
  
  p {
    /*width: 300px;*/
    /*overflow-x: auto;*/
    overflow: hidden;
    white-space: nowrap;
    /* padding-left: 10px;
    padding-right: 10px; 
    border: 1px dashed #f69;*/
  }

記得這裏加div的目的是,爲了paddingthis

 4.p>(span+span),而後兩個span裏面的內容如出一轍,且多於一行編碼

<p id="para">
    <span>Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span>
    <span>Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span>
</p>

控制檯輸入para.scrollLeft = 1494,發現和para.scrollLeft = 0 同樣,,也就是說若是我瞬間切換這兩個狀態,基本看不出來,想象一下,若是想循環,每次到1494的位置的時候就跳到0,這樣就能一直循環,而不須要第三個span,那麼接下來的一個問題是怎麼找到1494的位置,其實就是第一個span的clientWidth,行內元素是沒有這個屬性的,須要將其變成行內塊,因而,升級了下spa

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  p {
    margin: 0;
    padding: 0;
  }
  
  div {
    padding-left: 10px;
    padding-right: 10px;
    border: 1px dashed #f69;
    width: 300px;
  }
  
  p {
    /*width: 300px;*/
    /*overflow-x: auto;*/
    overflow: hidden;
    white-space: nowrap;
    /* padding-left: 10px;
    padding-right: 10px; 
    border: 1px dashed #f69;*/
  }
  
  span {
    display: inline-block;
  }
  </style>
</head>

<body>
  <div>
    <p id="para">
      <span id="start">Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span>
      <span id="end">Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span>
    </p>
  </div>
  <script>
  var para = document.getElementById("para");
  var start = document.getElementById("start");
  var end = document.getElementById("end");
  // para.scrollLeft = 0;
  // start.clientWidth + end.clientWidth + 兩個span之間的空格 = para.scrollWidth
  // 考慮到空格的影響,因此用下面的表達式,而不是start.clientWidth
  para.scrollLeft = para.scrollWidth - end.clientWidth;
  </script>
</body>

</html>

 

5.最後獲得的跑馬燈的效果

每當滾到第二個span的時候調到0

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  p {
    margin: 0;
    padding: 0;
  }
  
  div {
    padding-left: 10px;
    padding-right: 10px;
    border: 1px dashed #f69;
    width: 300px;
  }
  
  p {
    /*width: 300px;*/
    /*overflow-x: auto;*/
    overflow: hidden;
    white-space: nowrap;
    /* padding-left: 10px;
    padding-right: 10px; 
    border: 1px dashed #f69;*/
  }
  
  span {
    display: inline-block;
  }
  </style>
</head>

<body>
  <div id="box">
    <p id="para">
      <span id="start">Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span>
      <span id="end">Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year.</span>
    </p>
  </div>
  <script>
  var box = document.getElementById("box");
  var para = document.getElementById("para");
  var start = document.getElementById("start");
  var end = document.getElementById("end");
  // para.scrollLeft = para.scrollWidth - end.clientWidth;
  var timer = null;
  play();
// 中止
function stop () {
    window.clearInterval(timer);
}
// 播放
function play () {
    timer = window.setInterval(function() {
    para.scrollLeft += 1;
    if (para.scrollLeft === para.scrollWidth - end.clientWidth) {
      para.scrollLeft = 0;
    }
  }, 10)
}
box.onmouseenter = stop;
box.onmouseleave = play;
  </script>
</body>

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程