HTML 想隐藏滚动条,然后鼠标滚轮能滚动页面代码该怎么写,求解

2024-12-05 02:05:15
推荐回答(1个)
回答1:

外层div无滚动条(overflow: hidden;)

里层div有滚动条(overflow: auto;)

然后把里层的偏移一下,使滚动条看不见

具体例子看我这里写的

http://jsrun.net/N9pKp/edit

按住shift横向滚动。


至于偏移多少距离,可以用js算出滚动条的宽度,或者你干脆就像我上面写的一样,用20px,目前我没看到什么浏览器的默认滚动条样式是超过20px的。

js计算滚动条宽度的方法,参考一下,可能IE8有兼容问题,自己改一下吧

/**
 * 获取滚动条宽度
 * @returns {number}
 */
function getScrollBarWidth() {
    var oP = document.createElement('p');
    oP.style.width = '100px';
    oP.style.height = '100px';
    oP.style.overflowY = 'scroll';
    document.body.appendChild(oP);
    var scrollBarWidth = oP.offsetWidth - oP.clientWidth;
    oP.parentNode.removeChild(oP);
    return scrollBarWidth;
}