启用鼠标滚动而不显示垂直滚动条并保持背景答案

【问题标题】：Enable mouse scroll without vertical scrollbar displayed and maintain the background启用鼠标滚动而不显示垂直滚动条并保持背景
【发布时间】：2013-07-11 00:14:42
【问题描述】：

要求：启用鼠标滚轮垂直滚动而不显示滚动条并保持背景。

使用下面的解决方案，可以通过下面提到的解决方案达到预期

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

链接：Remove HTML scrollbars but allow mousewheel scrolling

我目前遇到的问题是，在子 div 内部，有一个具有交替颜色和样式的表格，我想保持背景。目前，使用上述解决方案，17px的滚动条区域是空的，看起来像是有人把滚动条擦掉了。问题是：

(a) 如何保持背景？

(b) 我能否将垂直滚动条的宽度减小到 1px，使其仅显示为细线，用户甚至不会注意到滚动条的存在。

【问题讨论】：

标签： jquery css html scroll

【解决方案1】：

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

     });

【讨论】：