HTML5 scrollbar that doesn't actually scroll

问题

I'm making a custom component that shows a part of huge dynamic content that changes frequently so I can't append and remove it all the time to the document.

A scrollbar with onScrollBegin, onScrollEnd, onScrollUpdate and scrollTop and scrollMax values without scroll-content functionality would be great.

I don't want the scroller to scroll the content for me. I need to get the current scrollTop value and do my staff without creating a content div with height.

What do you suggest?

$('#scroller').on('scroll', (e) => {

  let offsetY = $('#scroller').scrollTop();
  $('#custom-content').text("current offsetY: " + Math.round(offsetY));
  
});
$(document).ready(function(){
    $('#custom-content').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta/120 > 0) {
            let offsetY = $('#scroller').scrollTop()-3;
            $('#scroller')[0].scrollTop=offsetY;
            // $(this).text('scrolling up !');
        }
        else{
            // $(this).text('scrolling down !');
            let offsetY = $('#scroller').scrollTop()+3;
            $('#scroller')[0].scrollTop=offsetY;            
        }
        e.preventDefault();
    });
    

});

.scroll {

    width: 20px;
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;

    margin: 0 10px;
}

.scroll-content {
    height: 400px;
    -webkitTransform: translate3D(0px, 0px, 0px);

}

#custom-content {
    float:left;
    width:300px;
    height:200px;

    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div id='custom-content'>
  I want to change the scroll content here based on scroll offsetY. 
  </div>

  <div id='scroller' class="scroll">
      <div id='scroll-content' class="scroll-content">
      <!-- this is actually what I don't want -->
      </div>
  </div>

</div>

来源：https://stackoverflow.com/questions/47240950/html5-scrollbar-that-doesnt-actually-scroll

标签

javascript

jquery

html5

css3

scroller