我希望能够滚动整个页面,但不显示滚动条.
在谷歌浏览器中它是:
::-webkit-scrollbar {
display: none;
}
Run Code Online (Sandbox Code Playgroud)
但是Mozilla Firefox和Internet Explorer似乎并没有那样工作.
我也在CSS中尝试过这个:
overflow: hidden;
Run Code Online (Sandbox Code Playgroud)
这确实隐藏了滚动条,但我不能滚动了.
有什么办法可以删除滚动条,同时还能滚动整个页面吗?请使用CSS或HTML.
以下HTML将在div.container的右侧内侧边缘显示滚动条.
是否可以确定滚动条的宽度?
<div class="container" style="overflow-y:auto; height:40px;">
<div class="somethingBig"></div>
</div>
Run Code Online (Sandbox Code Playgroud) 我有一个元素,需要它的宽度没有(!)垂直滚动条.
Firebug告诉我身体宽度是1280px.
这些都可以在Firefox中正常工作:
console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );
$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );
Run Code Online (Sandbox Code Playgroud)
他们都返回1263px,这是我正在寻找的价值.
但是所有其他浏览器都给我1280px.
是否有跨浏览器的方式来获得没有(!)垂直滚动条的全屏宽度?
我正在使用Bootstrap 3.1.0在一个站点上工作.
你会注意到当模态窗口打开时,浏览器滚动条会暂时消失,然后返回.关闭它时也会这样做.
我怎样才能使它只是打开和关闭而没有浏览器滚动条交互.我已经看到人们遇到问题的堆栈上的帖子,但我找不到特定于我的问题的答案,所以如果其他人提出了这个请求并且有人知道并且想要将我链接到它,我会很感激它.在发布之前我已经搜索了大约2个小时.
html5 responsive-design twitter-bootstrap twitter-bootstrap-3
我想隐藏我的div元素和我的整个滚动条body,但仍然让用户使用鼠标滚轮或箭头键滚动.如何使用原始JavaScript或jQuery实现这一目标?有任何想法吗?
我可以通过设置CSS属性来禁用网格中的垂直滚动条overflow-y: hidden.但是,这也消除了使用鼠标滚轮滚动内容的功能.
有没有办法不显示滚动条但仍然允许内容滚动鼠标滚轮或箭头键?
在移动平台上打开Bootstrap 3模式时如何防止后台滚动?在桌面浏览器上,阻止后台滚动并按预期工作.
在移动浏览器(Safari ios,Chrome ios等)上,当打开模态并使用手指滚动它时,背景也会像模态一样滚动.我该如何预防呢?
如果元素设置为width: 100vw;并且存在垂直滚动条,则元素的宽度将等于视口加上滚动条的宽度.
有可能阻止这种情况吗?
是否可以在不禁用整个页面的水平滚动的情况下防止这种情况?除了改变我的css/markup以使元素100%的宽度,我无法想到任何东西.
在Windows 8.1上经过Chrome版本43.0.2357.81 m&FF 36.0.1和Opera 20.0.1387.91测试
这是所要求的代码:
HTML
<div class="parent">
<div class="box"></div>
</div>
<div class="tall"></div>
Run Code Online (Sandbox Code Playgroud)
CSS
body { margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after {
box-sizing: inherit;
position: relative;
}
.parent {
background: rgba(0, 0, 0, .4);
height: 100px;
width: 5rem;
margin-bottom: 25px;
}
.box {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, .4);
height: 50px;
width: 100vw;
}
.tall {
height: 100rem;
}
Run Code Online (Sandbox Code Playgroud) 我的CSS看起来像这样:
div.SOMECLASS {
position: absolute;
max-height: 300px
height: auto;
width: auto;
overflow: auto;
...
}
Run Code Online (Sandbox Code Playgroud)
div高度和宽度自动缩放.虽然高度已固定最大值:一旦达到此值,就会出现垂直滚动条.这很有效.
现在的问题:
如果垂直滚动条出现,他们使用了周围的10px的水平空间,如滚动条将放在里面的div.
但是,宽度不是自动调整的,以允许垂直滚动条使用的这些额外的10个像素.由于添加垂直滚动条之前的水平宽度恰好适合内容(正如width:auto设置所预期的那样),div现在还显示水平滚动条 - 允许缺少10个像素.这太傻了.
div以使垂直滚动条适合?如果可能的话我找的不依赖于只是完全禁用水平滚动,因为这可能会在某些时候需要(即对某些输入)的解决方案.
给定一个<textarea>固定的width,我希望它的"有效宽度"是常数(in px)."活动宽度"是指文本出现的区域.
当没有出现垂直滚动条时,"活动宽度"等于width.但是,当出现垂直滚动条时,"活动宽度"变得小于width(我猜测精确地小于滚动条的宽度).
我想确定是否出现垂直滚动条,如果是,则增加<textarea>滚动条宽度的宽度.如何识别滚动条的宽度?
有更好的方法吗?
(我对Firefox感兴趣,如果它让生活变得更轻松.)
css ×4
html ×4
javascript ×3
scrollbar ×3
jquery ×2
scroll ×2
width ×2
browser ×1
css3 ×1
firefox ×1
html5 ×1
modal-dialog ×1
mousewheel ×1