jQuery - Use window scrollbar to scroll content inside a DIV

Question

Is it possible to use window scrollers to scroll a big DIV content? instead of its own div scroller?

Answer 1

Use Windows scrollbar as separate element

It appears to be very simple to use de standard browser scrollbar as a seperate scrollbar for any purpose. You just need 3

with some CSS-parameters:

• container-div:
  to reposition the scrollbox-div a little bit to the left (otherwise the content-div stays visible).
• scrollbox-div:
  The scrollbox-div gets the scrollbar, because it contains the contents-div, which is larger then the scrollbox-div. The scrollbox-div is relative-repositioned to the left (-24px), so the contents-div is not visible in the container-div. The contents-div can not be made much smaller then about 33 px, otherwise the scrollbar disappears in IE.
• the contents-div:
  The contents-div is larger then the srollbox-div to force a scrollbar. It contains NOTHING, so it will be invisible

By changing the container+scrollbox-height and the content-height you can change the scrollbar handle size. Just experiment by changing the parameters.

With some jquery you can get/set the scrolltop-value. So with this parameter and some jquery you can select any part of data you want to display.

HTML:

  
   
  
        

        
  
   
  
  
scrolltop= 

CSS:

#container{   
    width: 16px;   
    height: 500px;
    overflow: hidden;
 }   
#scrollbox{   
    width: 40px;   
    height: 500px; 
    position:relative;
    left: -24px;  
    overflow: auto;
}   
#content{   
    height: 50000px;   
}

JQUERY:

$('document').ready(function(){
  $("#scrollbox").scroll( 
    function () {
      var scrolltop=$('#scrollbox').scrollTop();
      $('#scrolltop').text(scrolltop);
    }
  );  
});

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...