发表新帖
发表新帖

jQuery - Use window scrollbar to scroll content inside a DIV

前端 未结
关注
3 1956
梦谈多话
梦谈多话 2021-01-27 08:34

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

相关标签:
3条回答
  • 忘掉有多难
    2021-01-27 08:54

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

    0 讨论(0)
  • 北荒
    2021-01-27 09:11

    Something like

    • Make the body fixed position
    • Add event listeners to body scroll
    • Apply the body scroll to the desired container
    0 讨论(0)
  • 南方客
    2021-01-27 09:14

    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);
    }
  );  
});
    0 讨论(0)
 看不清?
提交回复
热议问题