<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dbjr.com.cn/" />

<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>

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

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

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

$(selector).scrollLeft(val)

參數(shù)列表:

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

實(shí)例代碼:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dbjr.com.cn/" />

<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>