jQuery中scrollLeft()方法用法實(shí)例

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

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

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

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

語法結(jié)構(gòu)一:

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

復(fù)制代碼代碼如下:

$(selector).scrollLeft()

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.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>

語法結(jié)構(gòu)二:

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

復(fù)制代碼代碼如下:

$(selector).scrollLeft(val)

參數(shù)列表:

參數(shù)	描述
val	設(shè)置水平滾動條左側(cè)偏移量

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.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>設(shè)置offset值</button>

</body>

</html>