`

获取准确的滚动条宽度

阅读更多


[size=large]
/*!
 * 获取浏览器竖向滚动条宽度
 * 首先创建一个用户不可见、无滚动条的DIV,获取DIV宽度后,
 * 再将DIV的Y轴滚动条设置为永远可见,再获取此时的DIV宽度
 * 删除DIV后返回前后宽度的差值
 *
 * @return    Integer     竖向滚动条宽度
 */
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;
}
[/size]
分享到:
评论

相关推荐

    jquery 获取浏览器滚动条宽度数值

    jquery 获取当前浏览器滚动条宽度数值

    21.如何获取垂直滚动条箭头位图宽度?(Visual C++编程 源代码)

    21.如何获取垂直滚动条箭头位图宽度?(Visual C++编程 源代码)21.如何获取垂直滚动条箭头位图宽度?(Visual C++编程 源代码)21.如何获取垂直滚动条箭头位图宽度?(Visual C++编程 源代码)21.如何获取垂直滚动...

    20.如何获取水平滚动条箭头位图宽度?(Visual C++编程 源代码)

    20.如何获取水平滚动条箭头位图宽度?(Visual C++编程 源代码)20.如何获取水平滚动条箭头位图宽度?(Visual C++编程 源代码)20.如何获取水平滚动条箭头位图宽度?(Visual C++编程 源代码)20.如何获取水平滚动...

    javascript获取滚动条高度 页面宽度与高度

    ### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    HTML 和 CSS 是构建网页布局的基础,滚动条在默认情况下会占据内容...同时,结合提供的博客链接(https://blog.csdn.net/fukaiit/article/details/100069537),读者可以获取更多关于滚动条样式的详细信息和实战经验。

    设置MSHFlexGrid滚动条滑块大小的源码

    这段代码通过`GetScrollInfo`和`SetScrollInfo`API获取和设置MSHFlexGrid的垂直滚动条信息,然后根据需求调整滑块的大小(在示例中,我们将滑块大小设置为原来的一半)。请注意,这只是一个基础示例,实际应用中可能...

    VC.net获取垂直滚动条箭头位图宽度

    获取垂直滚动条箭头位图宽度,你只需在运行的窗口中点击一个鼠标左键,即可获取到垂直滚动条的宽度信息,程序以弹出窗口的方式返回结果:垂直滚动条箭头位图宽度:X方向16、Y方向16。 运行环境:Windows/Visual C/...

    scrollbarWidth:获取滚动条宽度

    初始化功能并获取滚动条宽度。 // Init web global scrollbarWidth ( ) ; // 17 // You can also use with jQuery $ . scrollbarWidth ( ) ; // 17 // Or AMD/Node/CommonJS var scrollbarWidth = require ( '...

    各种滚动条的获取

    在源码层面,获取滚动条状态并进行操作可能涉及到监听滚动事件,如`addEventListener('scroll', callback)`,并在回调函数中处理滚动逻辑。同时,还可以使用`window.scrollTo(x, y)`方法来直接滚动到指定位置。 在...

    解决多种浏览器获取滚动条高度

    - 如果需要同时获取滚动条的宽度和高度,可以参考类似的方法,只是需要将获取滚动位置的逻辑替换为获取宽度或高度的逻辑。 #### 六、总结 通过上述方法,我们可以有效地解决在不同浏览器中获取滚动条高度的问题。...

    外部滚动条控制iframe

    ### 外部滚动条控制iframe:深入解析与实践 在网页设计中,iframe(Inline Frame)是一种常用的HTML元素,用于在当前文档内嵌入另一个HTML文档。然而,默认情况下,iframe内的滚动行为是独立于主页面的,即其滚动条...

    jquery很炫的滚动条效果

    /* 滚动条宽度 */ } ::-webkit-scrollbar-thumb { background: #888; /* 滚动条颜色 */ } ::-webkit-scrollbar-thumb:hover { background: #555; /* 鼠标悬停时的颜色 */ } ``` 请注意,这仅适用于Webkit浏览器...

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    jquery给表格加滚动条

    注意,根据实际需求,你可能需要调整滚动条的样式,如滚动条的宽度、颜色等,这可以通过CSS3的伪元素实现。 四、优化与扩展 - 可以使用jQuery插件,如DataTables,它提供了更丰富的表格功能,包括自动分页、排序、...

    VC带垂直滚动条对话框

    在VC++开发环境中,创建一个标准的对话框模板通常不包含滚动条,但有时为了处理大量数据或控件,我们可能需要为对话框添加垂直滚动条。本篇将详细讲解如何在VC++中为对话框添加垂直滚动条,并提供一个清晰的示例。 ...

    js模拟滚动条

    确保在窄屏设备或移动设备上,滚动条仍然易于使用和视觉上协调,可能需要调整滚动条的宽度和样式。 6. **兼容性处理**: 不同浏览器对滚动条的支持程度不同,因此需要编写兼容性代码。例如,使用`getComputedStyle...

    VB设置水平卷轴(滚动条)的宽度

    在VB(Visual Basic)编程中,用户界面的交互性是至关重要的,这通常涉及到各种控件的使用,如ListBox。...通过理解并运用上述代码,你可以自由控制ListBox或其他控件中的滚动条宽度,从而提升应用的整体用户体验。

    滚动条刷新以后居中

    根据题目描述,需求可总结为:当用户打开一个宽度超过1024像素的网页(如宽度设定为2000像素),希望滚动条能够在页面加载完成时自动移动到居中位置,即页面内容在屏幕中央显示。这样做的目的是让用户在打开网页时...

    MFC窗口滚动条

    然后,在窗口初始化时,你可以加载多张图片到内存DC,并计算它们的总高度(或宽度,取决于滚动条类型),设置为滚动条的最大值。 ```cpp void CMyWnd::LoadImages() { // 加载图片,计算总高度 int totalHeight =...

    精彩编程与编程技巧-显示窗口的水平和垂直滚动条...

    - 考虑到滚动条本身也会占据一定的空间,需要通过`GetSystemMetrics`获取滚动条的宽度或高度,然后调整窗口的整体大小。 3. **设置滚动条范围**: - 通过`SetScrollRange`函数设置滚动条的有效范围,即最小值和...

Global site tag (gtag.js) - Google Analytics