jQuery - Use window scrollbar to scroll content inside a DIV_问答_开发者

jQuery - Use window scrollbar to scroll content inside a DIV

开发者 https://www.devze.com 2023-01-27 07:54 出处：网络

Is it possible to use window scrollers to scroll a big DIV content? instead of its own div scrolle开发者_JS百科r?Something like

Is it possible to use window scrollers to scroll a big DIV content? instead of its own div scrolle开发者_JS百科r?

Something like

Make the body fixed position
Add event listeners to body scroll
Apply the body scroll to the desired container

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

<body>
<div id="container" >  
   <div id="scrollbox" >  
        <div id="content" >
        </div>  
   </div>  
</div>  
<p>scrolltop= <span id="scrolltop" ></span></p>
</body>

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);
    }
  );  
});

Since the scrollbar only affects the overall page, and not a specific element, no.. at least not without replacing the scrollbar entirely (strongly discouraged).