前端——关于滚动条的小知识

1、滚动条设置

父容器：overflow: hidden;height: 20rem;

子容器：overflow-y: scroll;或 overflow-y: auto !important;

2、滚动条置顶

$("#滚动条所在div")[0].scrollTop = 0;

3、获取竖向滚动条到顶部的距离

$(document).scrollTop();

4、获取横向滚动条到最左边的距离

$(document).scrollLeft();

5、获取滚动条宽度

function getScrollWidth() {  
    var noScroll, scroll, oDiv = document.createElement("DIV");  
    oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";  
    noScroll = document.body.appendChild(oDiv).clientWidth;  
    oDiv.style.overflowY = "scroll";  
    scroll = oDiv.clientWidth;  
    document.body.removeChild(oDiv);  
    return noScroll-scroll;  
} 

6、禁止滚动

function disabledMouseWheel() {
  if (document.addEventListener) {
    document.addEventListener('DOMMouseScroll', scrollFunc, false);
  }//W3C
  window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome
}
function scrollFunc(evt) {
  evt = evt || window.event;
    if(evt.preventDefault) {
    // Firefox
      evt.preventDefault();
      evt.stopPropagation();
    } else {
      // IE
      evt.cancelBubble=true;
      evt.returnValue = false;
  }
  return false;
}
window.onload=disabledMouseWheel;