Question

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

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

    <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，使其仅显示为细线，用户甚至不会注意到滚动条的存在。

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

     });

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

1 个答案: