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

最新推荐文章于 2025-06-11 13:11:47 发布

前方一片光明

最新推荐文章于 2025-06-11 13:11:47 发布

阅读量8.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： # jQuery # CSS 前端文章标签：滚动条宽度滚动条置顶滚动条到顶部距离滚动条到最左边的距离

本文链接：https://blog.csdn.net/qq_26230421/article/details/89220445

前端同时被 3 个专栏收录

26 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

CSS

8 篇文章

订阅专栏

本文详细介绍如何在网页中设置滚动条样式，包括滚动条的显示、置顶、获取滚动位置及宽度等实用技巧，同时提供了JavaScript代码实现，适用于前端开发者进行页面优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;