草庐IT

javascript - 强制浏览器显示滚动条的CSS

我编写了一个Web应用程序,发现当我调整页面大小时,浏览器不会在窗口缩小时显示它自己的滚动条。这会阻止用户访问内容。我已将主体宽度设置为500px,并将导航栏设置为white-space:nowrap。如何让浏览器识别屏幕右侧有内容?澄清一下,我想要浏览器的滚动条,而不是任何控件上的滚动条。 最佳答案 您可以使用以下选项之一,具体取决于您是要添加水平滚动条、垂直滚动条还是同时添加滚动条:body{overflow-x:scroll;}body{overflow-y:scroll;}body{overflow:scroll;}但是,我

html - CSS webkit 滚动条显示/隐藏

我正在使用-webkit-scrollbar并且我想要发生的是页面加载时隐藏的滚动条,并且它保持隐藏状态直到您将鼠标悬停在它所附加的容器div上。当您将鼠标悬停在可滚动区域上时,它就会出现。我尝试在我的CSS中添加:hover和:focus影响各种div和规则,但没有成功。有没有一种方法可以使用-webkit-scrollbar来完成我所指的事情?我可以发布代码,但它非常简单。只有一个附加了css规则的外部div,然后是一个设置了高度和宽度的内部div。然后是-webkit-scrollbar的css规则。#u#trail::-webkit-scrollbar{width:9px;he

带滚动条的 HTML 数据列表

这个问题在这里已经有了答案:ScrollbarforDatalistinHTML5(2个答案)关闭8年前。我正在使用HTML并尝试制作如前图所示的列表。但是,通过使用datalist我无法获得滚动条。你能告诉我如何在数据列表中启用滚动条吗?(注意:不能在我的网站中使用脚本语言来实现这一点)。//Manymorecountries...

html - 在滚动条上反转/更改 Logo

askthecssguy.com上的一篇文章展示了如何使用固定背景更改/反转滚动上的图像:http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/我的目标是让图像漂浮在其他元素(在本例中为图像)之上,从而进一步推进这一概念。您可以在此处查看结果:http://playground.iamkeir.com/invert-logo/v2/但是,我的实现使用了多余的元素,因此,我想知道是否有人对实现此目标的其他方法有任何想法/建议?Javascr

html - min-height 100vh 创建垂直滚动条,即使内容小于视口(viewport)

我正在将min-height:100vh;应用于flexbox容器,当我使用justify-content:space-around;时,我得到了一个垂直滚动条。p>我不想强制高度,但我不明白为什么滚动条在那里,因为内容的尺寸小于视口(viewport)。*{padding:0;margin:0;box-sizing:border-box;}body{margin:0;padding:0;}.wrapper{min-height:100vh;display:flex;flex-direction:column;justify-content:space-around;}min-heig

html - CSS:如何更改 webkit 中滚动条右下角的颜色?

问题:如何在webkit(Google-Chrome)中更改滚动条右下角方block的颜色(黑色)?这是我目前所拥有的:/*http://www.coffeepowered.net/2011/06/17/sexy-css-scrollbars/http://css-tricks.com/custom-scrollbars-in-webkit/*/::-webkit-scrollbar{width:13px;height:13px;}::-webkit-scrollbar:hover{height:18px;}::-webkit-scrollbar-button:start:decrem

html - 使用 overflow-x : auto;"时,有没有办法在我的表格和滚动条之间放置一个空格

我有一个像这样的简单表格:......#table-overflow{position:absolute;top:10rem;right:3rem;left:3rem;bottom:2rem;display:block;overflow-x:auto;}当有很多行和列时,滚动条会按预期出现。当宽度大于表格时,我会在右侧看到一个垂直滚动条,表格数据会一直上升到该滚动条。有什么方法可以在不使用jQuery滚动条插件的情况下在垂直滚动条左侧和水平滚动条上方留出空间吗?我想看到的是这样的:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxvx

html - 如何防止滚动条与内容重叠?

我有一个预格式化代码块(),它水平溢出,所以有一个水平滚动条允许用户查看内容。overflow:auto;但是,在IE7(可能是其他IE版本)中,滚动条与我内容的最后一行重叠(当只有一行内容时,这尤其令人恼火)。我已经尝试了列出的解决方案here,但它没有用。唯一可行的解​​决方案是使用overflow:scroll;它向我所有预格式化的部分添加了一个滚动条,这太糟糕了。注意:它在Firefox3和GoogleChrome中运行良好。更新我找到了一个解决方案(请参阅我的回答),但如果有人找到一种方法来避免在IE7的每个预格式化部分中使用丑陋的填充,那就太完美了。

jquery - 即使没有可滚动的内容,也会出现 css 溢出滚动条

我像下面的代码一样使用overflow:scroll,我遇到的问题是即使没有文本,滚动条仍然显示。w3schools上的演示:http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow你会看到,即使你不能水平滚动(向左或向右),仍然有一个滚动条。如果没有任何内容可滚动到,我试图将它放在滚动条不出现的地方。希望这是有道理的div.scroll{background-color:#00FFFF;width:100px;height:100px;overflow:scroll;}overflow:scrollYouca

html - 增加溢出宽度以调整滚动条

当滚动条可见时,我的CSS应该如何使div调整其宽度。这是场景,我有一个div和子元素我想在滚动条溢出时自动调整我的div宽度。意味着当没有滚动条时,它应该像左侧的图像,当滚动条变得可见时,它应该自动调整滚动条的宽度。我不想使用javascript,而是使用纯CSS和HTML。我相信仅使用CSS和HTML是可能的。考虑到上面的UL列表,我的CSS是这样的#ListHolder{display:inline-block;}#ListHolder>ul{width:250px;//ul>li{display:inline-block;}#LeftList{float:left;}#Righ