[Snippet/Javascript] Div mitscrollen

André Javascript, jQuery, Programmieren, Snippets

Hier mal wieder ein Mini Snippet zu JavaScript. Mit jQuery ist es ziemlich einfach Scroll-Eigenschaften

auf ein anderes Element zu übertragen. Wenn also das obere Div gescrollt wird, scrollt das untere

automatisch mit. Anbei der Quelltext und hier eine Livedemo.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <title>test</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
      <style type='text/css'>
         div { font-size:200px; width:200px; height:100px; white-space:nowrap; overflow:scroll }
         div + div { overflow:hidden }
      </style>
   </head>
   <body>
      <div id="div1">test test test test test test</div>
      <div id="div2">test test test test test test</div>
      <script type="text/javascript">
         $('#div1').scroll(function() {
         $('#div2').scrollLeft(this.scrollLeft);
         $('#div2').scrollTop(this.scrollTop);
         });
      </script>
   </body>
</html>

2 Gedanken zu „[Snippet/Javascript] Div mitscrollen“

Schreibe einen Kommentar