스크롤, 위치값

by Kim Ara

HTML

<div>
  <span class="item01">scrollLeft</span>
  <span class="item02"></span>  
</div>
<div>
  <span class="item03">scrollTop</span>
  <span class="item04"></span>  
</div>

<div class="demo">
  <h1>lalala</h1>
  <h2>Hello</h2>
</div>

<p id="getp">width</p>
<p id="getd">$(document).width()</p> 
<p id="getw">$(window).width()</p> 
<p id="getav">screen.availWidth</p> 
<p id="getiw">window.innerWidth</p>
<p id="getow">window.outerWidth</p>
<div class="txt01"></div>

CSS

div.demo { background:#CCCCCC none repeat scroll 0 0; border:3px solid #666666; margin:5px; padding:5px; position:relative; width:200px; height:100px; overflow:auto; }
h2 { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }

p { width:200px; height:50px;margin:5px; background:pink; cursor:pointer; }

JavaScript

$(document).ready(function(){

	var test01 = $('.item01');
  $('.item02').text(test01.scrollLeft());

	var test02 = $('.item03');
  $('.item04').text(test02.scrollTop());

	$("div.demo").scrollLeft(300);
  //$("div.demo").scrollTop(300);
  
  function showWidth(ele, w) { 
    $(".txt01").text("The width for the " + ele + " is " + w + "px.");
  } $("#getp").click(function () { 
    showWidth("paragraph", $("p").width());
  }); $("#getd").click(function () { 
    showWidth("document", $(document).width()); 
  }); $("#getw").click(function () {
    showWidth("window", $(window).width()); 
  }); $("#getav").click(function () {
    showWidth("window", screen.availWidth ); 
  }); $("#getiw").click(function () {
    showWidth("window", window.innerWidth ); 
  }); $("#getow").click(function () {
    showWidth("window", window.outerWidth ); 
  });
  
});