对于<html dir="rtl">某些浏览器(Safari,Edge,IE)会自动将滚动条移动到左侧,这是正确的行为:
不幸的是,主流浏览器(Chrome和Firefox)的行为方式不同,滚动条仍位于浏览器的右侧.
是否有可能以编程方式检测(最好使用vanilla JS)哪一侧是滚动条?
UPD(28.09.2018):到目前为止,答案中没有可行的解决方案,人们试图通过使用getBoundingClientRect().left或者检测滚动条位置.offsetLeft,这将无法工作,因为它始终0至少在Edge中独立于滚动条位置.
UPD(15.10.2018):TLDR:没办法.
似乎浏览器不提供用于检测滚动条侧的API.在下面的答案中,有插入假人的技巧div并计算该div中的滚动条的位置.我不能将这些技巧视为答案,因为文档滚动条可以通过多种方式定位(<html dir="rtl">RTL版本的操作系统,浏览器设置等)
对于Multiline = True的System.Windows.Forms.TextBox,我只想在文本不适合时显示滚动条.
这是仅用于显示的只读文本框.它是一个TextBox,以便用户可以复制文本.是否有任何内置支持滚动条的自动显示?如果没有,我应该使用不同的控件吗?或者我是否需要挂钩TextChanged并手动检查溢出(如果是,如何判断文本是否适合?)
没有任何运气与WordWrap和Scrollbars设置的各种组合.我想最初没有滚动条,只有当文本不适合给定的方向时才会动态显示.
@nobugz,谢谢,当WordWrap被禁用时有效.我不想禁用wordwrap,但它是两个邪恶中较小的一个.
@AndréNeves,好的一点,如果是用户可编辑的话,我会这样做.我同意一致性是UI直观性的基本规则.
这是一个证明问题的jsbin示例.
基本上,我有以下javascript将窗口滚动到页面上的锚点:
// get anchors with href's that start with "#"
$("a[href^=#]").live("click", function(){
var target = $($(this).attr("href"));
// if the target exists: scroll to it...
if(target[0]){
// If the page isn't long enough to scroll to the target's position
// we want to scroll as much as we can. This part prevents a sudden
// stop when window.scrollTop reaches its maximum.
var y = Math.min(target.offset().top, $(document).height() - $(window).height());
// also, don't …Run Code Online (Sandbox Code Playgroud) 给定一个包含2列和多行的表布局面板,如何将滚动条附加到它上面,因为它有时会比表单的大小增长得多.
谢谢
嗨,我有一个绑定到集合的ListView.我将ListView的高度设置为auto,以便占用该区域中的所有空间.但是,在将高度设置为auto后,没有滚动条.如果我给它一个高度,那么滚动条就会显示出来.
标记非常类似于以下内容
<Grid>
<StackPanel>
<Expander>
<DataGrid>
<Expander>
<ListView>
Run Code Online (Sandbox Code Playgroud) 是否可以在webkit滚动条上使用转换?我试过了:
div#main::-webkit-scrollbar-thumb {
background: rgba(255,204,102,0.25);
-webkit-transition: background 1s;
transition: background 1s;
}
div#main:hover::-webkit-scrollbar-thumb {
background: rgba(255,204,102,1);
}
Run Code Online (Sandbox Code Playgroud)
但它不起作用.或者是否可以创建类似的效果(没有JavaScript)?
我overflow-y在Chrome中遇到了该属性的问题.即使我已将其设置为hidden,我仍然可以使用鼠标滚轮滚动页面.
这是我的代码:
html,
body {
overflow-y: hidden;
}
#content {
position: absolute;
width: 100%;
}
.step {
position: relative;
height: 500px;
margin-bottom: 500px;
}Run Code Online (Sandbox Code Playgroud)
<body>
<div id="content">
<div class="step">this is the 1st step</div>
<div class="step">this is the 2nd step</div>
<div class="step">this is the 3rd step</div>
</div>
</body>Run Code Online (Sandbox Code Playgroud)
有人知道如何阻止Chrome中的垂直滚动吗?
谢谢!