水平滚动条是浏览器中的一种用户界面元素,用于在水平方向上滚动网页内容。它通常出现在网页内容的右侧或底部,当网页内容超出浏览器窗口的可视区域时,用户可以通过拖动水平滚动条来查看隐藏部分的内容。
然而,并不是所有情况下都需要在浏览器中使用水平滚动条。以下是一些情况:
总结起来,虽然水平滚动条在某些情况下是必要的,但在现代网页设计中,尽量避免出现水平滚动条可以提供更好的用户体验。
CSS滚动条选择器 ::-webkit-scrollbar — 整个滚动条 ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头) ::-webkit-scrollbar-thumb...— 滚动条上的滚动滑块 ::-webkit-scrollbar-track — 滚动条轨道 ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner...— 当同时有垂直滚动条和水平滚动条时交汇的部分 ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮) ::-webkit-scrollbar...仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用 修改滚动条样式 .container { width: 100px; height: 100px...; overflow: auto; } /* 整个滚动条 */ .container::-webkit-scrollbar { width : 8px; } /* 滚动条里面滑块 */ .
虽然大多数人不会关注到滚动条的样式,但是有一些网站还是对滚动条进行了优化,比如网易邮箱。我们可以用 CSS 来设置浏览器的滚动条样式,下面整理一下 CSS 滚动条的几个属性及代表的意思。 ?...还有更详尽的一些属性: :horizontal 水平方向的滚动条 :vertical 垂直 方向的滚动条 :decrement 应用于按钮和内层轨道(track piece)。...它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)...:increment decrement 类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。) :start 伪类也应用于按钮和滑块。...:no-button 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。 :corner-present 用于所有滚动条轨道,指示滚动条圆角是否显示。
本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。...0.需求 有的时候我们不想使用浏览器默认的滚动条样式,因为不够定制化和美观。那么如何自定义滚动条的样式呢?下面一起来看看吧。...::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮) 注意: (1)浏览器的支持情况: ::-webkit-scrollbar 仅仅在支持Webkit...(2)可设置竖直/水平方向的滚动条 可以设置水平方向的滚动条(:horizontal),不加默认是竖直方向(:vertical)。...2.demo快速上手 2.1 Webkit内核的浏览器自定义滚动条样式 (chrome, safari) 如果觉得上述说明有些抽象,可以直接在浏览器中打开demo,结合demo中的注释来理解各个属性的意义
,所以用浏览器打开后,可以看到垂直滚动条。...2判断垂直滚动条是否到达底部 弄明白了以上的概念,编码其实就比较简单了, 以下是示例代码: = nScrollHight语句中,需要用“>=”比较运算符,而没有水平滚动条的时候...还可以判断水平滚动条是否滚动到头了。 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163728.html原文链接:https://javaforall.cn
我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop 这个属性,而且并没有做兼容性处理。...hidden 或者 overflow:auto 属性 必须指定 top、bottom、left、right 4 个值之一,否则只会处于相对定位 父元素的高度不能低于 sticky 元素的高度 sticky 元素仅在其父元素内生效...答案是否定的。 我们一同看看第四种方案。 四、使用 obj.getBoundingClientRect().top 实现 定义: 这个 API 可以告诉你页面中某个元素相对浏览器视窗上下左右的距离。...,offsetWidth 也包括垂直滚动条的宽度;如果存在水平滚动条,offsetHeight 也包括水平滚动条的高度; offsetTop: 元素的上外边框至 offsetParent 元素的上内边框之间的像素距离...直到有一天我用美团点外卖的时候,我才开始注意这个问题。
"> 由于内部的div标签高度比外部的长,并且外部的div允许自动出现垂直滚动条,所以用浏览器打开后...2判断垂直滚动条是否到达底部 弄明白了以上的概念,编码其实就比较简单了, 以下是示例代码: = nScrollHight语句中,需要用“>=”比较运算符,而没有水平滚动条的时候...还可以判断水平滚动条是否滚动到头了。 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163748.html原文链接:https://javaforall.cn
electricChars: boolean 在输入可能改变当前的缩进时,是否重新缩进,默认为true (仅在mode支持缩进时有效)。...fixedGutter: boolean 设置gutter跟随编辑器内容水平滚动(false)还是固定在左侧(true或默认)。 scrollbarStyle: string 设置滚动条。...默认为”native”,显示原生的滚动条。核心库还提供了”null”样式,此样式会完全隐藏滚动条。Addons可以设置更多的滚动条模式。...coverGutterNextToScrollbar: boolean 当fixedGutter启用,并且存在水平滚动条时,在滚动条最左侧默认会显示gutter,当此项设置为true时,gutter会被带有...在移动浏览器上,默认是contenteditable,在桌面浏览器上,默认是textarea。在contenteditable模式下对IME和屏幕阅读器支持更好。
pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是 clientX + 水平滚动条滚动的距离。...3 client 坐标原点:浏览器内容区域左上角(即浏览器中用户所看到区域的左上角,内容区域不包括工具栏和滚动条)。...clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)。 clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动的距离)。...client坐标的最大范围是 (window.innerWidth - 垂直滚动条宽度, window.innerHeight - 水平滚动条高度)。...*计算这个坐标时,由于是基于浏览器窗口中用来显示网页的可视区域,那么也就是说需要拖动滚动条才能看到的区域不算;当你将浏览器窗口缩小时,clientX/clientY 的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域
在移动设备上,浏览器会显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap,这样当水平空间不够时,浏览器会帮我们自动换行。...长单词和链接 当在移动屏幕上阅读一篇文章时,一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...site-header { position: sticky; top: 0; /*other styles*/ } } 在上面的代码段中,我们告诉浏览器仅在视口的高度等于或大于...否则,浏览器将显示一个水平滚动条。 img { max-width: 100%; } 10....水平滚动条 由于元素的宽度,有些元素会导致出现水平滚动条。 找到这个问题的原因最简单的方法就是使用 CSS outline。
获取竖直滚动条到顶部的垂直高度 (即网页被卷上去的高度)(ie浏览器): document.documentElement.scrollTop; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度...)(其他浏览器): document.body.scrollLeft; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)(ie浏览器): document.documentElement.scrollLeft...的宽度: $(document.body).width(); 获取竖直滚动条到顶部的垂直高度 (即网页被卷上去的高度) :$(document).scrollTop(); 获取水平滚动条到左边的水平宽度...Y值) 注意clientY和pageY的区别,pageY在页面无滚动条或滚动条下拉0的情况下值等同于clientY event.offsetX 相对容器的水平坐标 event.offsetY...另外offsetY并不在乎触发事件的元素是否有定位属性,它总是相对于触发事件的元素来计算偏移值。
set_width:false:设置你内容的宽度 值可以是像素或者百分比 set_height:false:设置你内容的高度 值可以是像素或者百分比 horizontalScroll:Boolean:是否创建一个水平滚动条...","left");:滚动到最左边(水平滚动条) $(selector).mCustomScrollbar("scrollTo","right");:滚动到最右边(水平滚动条 $(selector).mCustomScrollbar...更加进阶的使用:修改浏览器的滚动条 单单是修改某个内容区域的边栏已经无法满足我们的需求了,我们还想修改浏览器边栏应该怎么办?...这当然是无法用 Javascript 来实现,因为浏览器是一个容器,Javascript 是容器里面的代码,怎么会把容器修改了呢?当然,有问题就肯定有解决方法。...这样,这个 div 就扩充到了整个浏览器界面,这样就可以被当做是一个网页的 body。然后加上 overflow:auto 让其超出自动出现滚动条。这样就可以模拟出修改了浏览器滚动条的效果。
内容不会被修剪,会呈现在元素框之外 */ overflow: visible; /* 内容会被修剪,并且其余内容不可见 */ overflow: hidden; /* 内容会被修剪,浏览器会显示滚动条以便查看其余内容...*/ overflow: scroll; /* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */ overflow: auto; /* 规定从父元素继承overflow属性的值 */ overflow...仅在基于 WebKit(例如,Safari)和基于Blink的(例如,Chrome或Opera)浏览器中受支持。...外部容器绝对定位法 用绝对定位,保证了body的宽度一直保持完整空间: html { overflow-y: scroll; // 兼容ie8,不支持:root, vw } :root { overflow-y...内部容器做兼容 .wrapper { overflow-y: scroll; // fallback overflow-y: overlay; } 总结 个人推荐还是用 overlay
2、scrollbar corner为横向和竖向的交叉角区域 3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件 一旦发现滚动条的自定义样式,浏览器的默认样式设置将会失效,只使用在css.../*滚动条里面的小方块*/ -webkit-scrollbar-corner /* 垂直和水平的交叉角 */ -webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */ 可以结合以下伪类进行设置...(不同的操作系统浏览器滚动条可能不一样,所有可以根据下面伪类来设置): :horizontal 水平方向的track、track-piect、thumb :vertica 垂直方向的track、track-piect...,轨道结束的位置是否是一对按钮 :single-button 适用于buttons和track pieces,轨道结束的位置是否是一个按钮 :no-button 适用于track pieces,轨道结束的位置没有按钮...:corner-present 适用于所有scrollbar,滚动条的角落是否存在 :window-inactive 适用于所有scrollbar,包含滚动条的区域,焦点不在该窗口的时候 :enabled
通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。...一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话...参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth 判断目标元素是否出现滚动条 targetElement...为目标html元素,以下代码用于判断该元素内是否出现滚动条 if (targetElement.offsetHeight > targetElement.clientHeight && targetElement.offsetWidth...) { console.log("出现垂直滚动条"); } if (obj.offsetHeight>obj.clientHeight) { console.log("出现水平滚动条"); }
滚动条是图形用户界面(UI)中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下,浏览器会为body内容的溢出包含一个滚动条。...在其他情况下,UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器的内容。每个浏览器都有一组默认的滚动条样式。在某些情况下,您可能有充分的理由来定制滚动条。...将属性的值设置为scroll会指示浏览器始终向容器添加滚动条。无论目标容器是否有超出其边界的内容,容器始终会有一个滚动条。...另一方面,如果将overflow-y属性的值设置为auto,则浏览器只有在目标容器有超出内容时才会添加滚动条。...在下一节中,我们将学习如何设置水平滚动条。设置自定义水平滚动条。您可以向网页内的容器添加水平滚动条。水平滚动条可以使用户在较短的容器内查看一系列横向内容。
,即为元素设定的高度和宽度,如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高,包含内边距,但不包括水平滚动条、边框和外边距。...2.HTMLElement.offsetWidth/offsetHeight(只读) 测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话...当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。 8.Window.scrollX 返回文档/页面水平方向滚动的像素值。...,pageX通常会大于clientX,因为页面还存在被卷起来的部分的宽度和高度,如下所示: 由于浏览器出现了垂直和水平的滚动条,所以pageX和pageY大于clientX和clientY。...当浏览器的滚动条没有被拖动或者浏览器没有滚动条的时候,两者是相等的。
在Windows环境下浏览网页时,您是否也遇到过这种困扰?由于页面布局或内容太多,经常会出现多余的上下左右滚动条,不仅影响浏览体验,也破坏了网页的整体美感。...但对普通用户而言,传统的滚动条往往成为破坏视觉体验的"小捣蛋"。尤其是在全屏展示或设计感十足的网页上,一个突兀的滚动条足以让人蹙额。 这就是"隐形滚动条"这样的浏览器扩展应运而生的原因。...智能响应:仅在鼠标悬停或滚动时显现,平时则隐藏,既保留了功能性,又不牺牲界面的简洁。 自定义风格:用户可以根据个人喜好调整滚动条的颜色、宽度、透明度等,打造个性化的浏览体验。...快速切换标记点:双击还可以标记当前的浏览位置,同时会自动生成一份目录,点击即可直达内容区域,也可以按下 Ctrl 来切换 安装使用 访问浏览器应用店,搜索“隐形滚动条”或使用提供的链接。...Edge安装安装:隐形滚动条 - Microsoft Edge Addons[1] Chrome安装链接:隐形滚动条 - Chrome 应用商店[2] 总结 隐身滚动条这一简单而巧妙的浏览器扩展,虽然功能单一
我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop 这个属性,而且并没有做兼容性处理。...答案是否定的。 我们一同看看第四种方案。 四、使用 obj.getBoundingClientRect().top 实现 定义: 这个 API 可以告诉你页面中某个元素相对浏览器视窗上下左右的距离。...,offsetWidth 也包括垂直滚动条的宽度;如果存在水平滚动条,offsetHeight 也包括水平滚动条的高度; offsetTop: 元素的上外边框至 offsetParent 元素的上内边框之间的像素距离...直到有一天我用美团点外卖的时候,我才开始注意这个问题。...这样可以控制在一定时间内只读取 这里节流函数就直接是用 lodash.js 封装好的 throttle 方法。
兼容性: ①滚动条外观不同; ②宽度设定机制不同。 ? 因为IE7下width宽度计算为整400px,然而垂直滚动条占用了部分宽度,所以出现了水平滚动条。...想要去掉这个水平滚动条,只需要删除width:100%就可以了。 作用前提: ①非display:inline水平; ②对应方位的尺寸限制。...body/html与滚动条: 无论什么浏览器,默认滚动条均来自,而不是。...IE-7浏览器默认:html{overflow-y:scroll;} IE-8+浏览器默认:html{overflow-y:auto;} 因此想要去除页面滚动条html{overflow:hidden...原生滚动回调效果:-webkit-overflow-scrolling:touch; 3、Overflow与块状格式上下文 块级格式上下文(BFC):具体内容可参考BFC(块级格式上下文) 不建议用overflow
领取专属 10元无门槛券
手把手带您无忧上云