There is a fixed block, it has a height of 1100 pixels, but if someone comes in and the screen is less than 1100 pixels, then there is no scrolling to the end of the block ... How to solve the problem?

.fixed-bg{ position: fixed; top: 0; left: 0; height: 1100px; width: 500px; color: white; border: 2px solid lime; overflow: auto; } 
 <div class="fixed-bg"> </div>

  • 2
    change position: fixed; on position: absolute; - HamSter
  • The fact of the matter is that it should be fixed .. - user190134

1 answer 1

  var fY = 0; $("#scrollFixedBlock").ready(function(){ $("#scrollFixedBlock").bind('mousewheel', function(e){ if(e.originalEvent.deltaY>0){ if(fY>=( -parseInt( $("#scrollFixedBlock").css('height') ) )+window.innerHeight ){ fY -=100; $("#scrollFixedBlock").stop().animate({"top":fY}, '500', 'linear', function() {}); } }else{ if(fY<=0){ fY +=100; $("#scrollFixedBlock").stop().animate({"top":fY}, '500', 'linear', function() {}); } } return false; }); });

Just when scrolling, change the css property top