jQuery中scrollLeft()方法用法實例

更新時間：2015年01月16日 15:49:26 投稿：shichen2014

這篇文章主要介紹了jQuery中scrollLeft()方法用法,實例分析了scrollLeft()方法的功能、定義及獲取或設置匹配元素相對滾動條左側的偏移(offset)量時的使用技巧,需要的朋友可以參考下

本文實例講述了jQuery中scrollLeft()方法用法。分享給大家供大家參考。具體分析如下：

此方法獲取或設置匹配元素相對滾動條左側的偏移(offset)量。

語法結構一:

當scrollLeft()方法沒有參數的時候就是獲取匹配元素相對滾動條左側的偏移量。

復制代碼代碼如下:

$(selector).scrollLeft()

實例代碼:

復制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

#div1{

  border:1px solid black;

  width:200px;

  height:200px;

  overflow:auto

}

#div2{

  height:150px;

  width:400px;

}

#div3{

  height:40px;

  width:200px;

  background-color:green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    alert($("#div1").scrollLeft()); 

  }); 

})

</script>

</head>

<body>

<div id="div1">

  <div id="div2">

    <div id="div3"></div>

  </div>

</div>

<button>獲取offset值</button>

</body>

</html>

語法結構二:

當scrollLeft()帶有參數的時候是設置匹配元素相對滾動條左側的偏移量。

復制代碼代碼如下:

$(selector).scrollLeft(val)

參數列表:

參數	描述
val	設置水平滾動條左側偏移量

實例代碼:

復制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

#div1{

  border:1px solid black;

  width:200px;

  height:200px;

  overflow:auto

}

#div2{

  height:150px;

  width:400px;

}

#div3{

  height:40px;

  width:200px;

  background-color:green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("#div1").scrollLeft(100); 

  }); 

}); 

</script>

</head>

<body>

<div id="div1">

  <div id="div2">

    <div id="div3"></div>

  </div>

</div>

<button>設置offset值</button>

</body>

</html>