1

Requirement : Enable mouse wheel vertical scroll without displaying the scrollbar and maintain the background.

Using the below solution, am able to achieve the expected by following the solution as mentioned below

    <div style='overflow:hidden; width:200px;'>
       <div style='overflow:scroll; width:217px'>
          My mousewheel scrollable content here....
       </div>
    </div>

Link : Remove HTML scrollbars but allow mousewheel scrolling

The issue that I currently have is that inside the child div, there is a table with alternate colors and styling and I would like to maintain the background. Currently, using the above solution, the scrollbar area of 17px is empty and looks like someone has rubbed off the scrollbar. Questions are :

(a) how can I maintain the background ?

(b) can I reduce the width of the vertical scrollbar to 1px so that it appears only as a thin line and the users do not even notice the existence of a scrollbar.

Community
  • 1
  • 1
user2228591
  • 115
  • 1
  • 1
  • 10

1 Answers1

0
    I tried a different solution using jQuery to avoid the background problem      

    //My page is split into 2 sections div1 and div2
    //div1 - Div on Left Hand Side
    //div2 - Div on Right Hand Side
    //On scrolling mouse in either of the divs, the other div should move up/down 

    Tried the below code and it works. Hope this helps someone     


    $( '#div1' ).bind('mousewheel', function(event, delta, deltaX, deltaY) {

     console.log(delta, deltaX, deltaY);

      var panelPos=$('#div2' ).scrollTop();
     $( '#div2' ).scrollTop(panelPos - (deltaY * 30));
     $( '#div1' ).scrollTop($('#div2').scrollTop());

     });
user2228591
  • 115
  • 1
  • 1
  • 10