我很想知道Facebook上的自定义滚动条是如何制作的.
它只是CSS或一些JavaScript吗？
如果是,我可以知道代码是什么样的吗？
此问题特定于Facebook滚动条样式,而不是如何简单地使用自定义滚动条
Facebook刚刚更新聊天(又一次),现在屏幕左侧有一个新的固定侧栏.当其内容溢出时,会出现滚动条,但仅当使用鼠标滚轮滚动或鼠标移动(或接近)滚动条时.如果鼠标没有在它上面,它会淡出.它对于窗口对象(例如聊天本身)非常有用.那么它是怎样工作的？
PS我正在寻找一个纯粹的html5/css/javascript解决方案(没有jquery等),没有必要的浏览器支持,应该在最新的chrome中工作,仅此而已,因为我只为chrome制作应用程序.
error我在使用时得到这个AppBar：
滚动条的 ScrollController 没有附加 ScrollPosition。
这是我的CustomScrollBar：
class CustomScrollBar extends StatelessWidget {
final Widget child;
final ScrollController scrollController;
const CustomScrollBar({
required this.scrollController,
required this.child,
});
@override
Widget build(BuildContext context) {
return RawScrollbar(
thumbColor: AppColors.gray,
radius: Radius.circular(8),
thickness: 4,
isAlwaysShown: true,
controller: scrollController,
child: child,
);
}
}
我应该永远可见。这就是我使用它的方式：
child: CustomScrollBar(
scrollController: _scrollControllerForScrollBar,
child: SingleChildScrollView(
controller: _scrollControllerForScrollBar,
child: Padding(
padding: EdgeInsets.all(7.0.scaled),
child: Container(
width: double.infinity,
child: Text(
'any text bla bla bla \n\n\n this is a lot …我有这个HTML结构:
<div id="body">
<div id="head">
<p>Dynamic height without scrollbar</p>
</div>
<div id="content">
<p>Dynamic height with scrollbar</p>
</div>
<div id="foot">
<p>Fixed height without scrollbar</p>
</div>
</div>
我希望主要部分(#body)中的三个部分没有溢出.所以我需要一个中间部分的滚动条.
我试过这个CSS:
#content{
border: red solid 1px;
overflow-y: auto;
}
还有这个:
#content{
border: red solid 1px;
overflow-y: auto;
height: 100%;
}
但它们都不起作用.
我在JSFiddle上做了一个例子.
我只能用CSS和HTML做到这一点吗？我宁愿避免使用Javascript.
是否有一个简单可靠的解决方案来检测窗口垂直滚动条出现/消失？
window.onresize 在JavaScript DOM操作页面变得足够高以显示滚动条之后,不会触发.
在这个非常相似的帖子中检测一个页面是否有垂直滚动条描述的解决方案如何检测滚动条是否存在,但我需要知道它何时出现.
我在div中有一个表(它是溢出的,所以浏览器呈现滚动条).使用JavaScript,如何将轨道上的滚动条手柄移动到与表格中行的位置相对应的位置？
+--------------------------------------+
|100 | |
|101 | |
|102 | |
|103 | |
|104 | |
|105 This is a table that |---|
|106 has overflowed. | - | <-- I want to move this using JavaScript,
|107 |---| so that a specific row # is visible.
|108 | |
|109 | |
|110 | |
|111 | |
+--------------------------------------+
我已经设置了一个jQuery UI进度条,但不能使用jQuery动画来为它的值设置动画.关于如何使这项工作的任何想法？
该percentDone变量保存从0到100应该显示多远沿滚动条是数字(这工作正常).
我尝试过几种不同的东西但无济于事.这是我到目前为止所拥有的:
var progressbar = $("#progressbar1").widget();
progressbar.animate({
value: percentDone
}, 5000, function() {
console.debug('done animating');
});
请注意,如果我使用"value"方法更新滚动条,它可以正常工作,但它跳转到该值而不是平滑地动画到它:
$("#progressbar1").progressbar('value', percentDone);
我有一个位于页面"外部"的绝对定位元素,但我希望浏览器(我使用的是Firefox 3)不显示水平滚动条.似乎显示位于左侧的div(例如,具有"left:-20px")是可以的,并且没有显示滚动条.但是右边的相同内容("右:-20px")始终显示滚动条.是否可以隐藏滚动条,但是可以保持标准滚动？我的意思是我只想禁用由于这个绝对定位元素的滚动,但是由于其他元素而保持滚动(我知道我可以完全禁用滚动条,这不是我想要的).
<!DOCTYPE html>
<html>
<body>
<div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
element
</div>
<div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
element
</div>
<h1>Hello</h1>
<p>world</p>
</body>
</html>
我正在尝试在C#WinForm中滚动到DataGridView的底部.
此代码适用于TextBox:
textbox_txt.SelectionStart = textbox_txt.Text.Length;
textbox_txt.ScrollToCaret();
...但我不知道如何使用DataGridView.有什么帮助吗？
如何使用CSS3设置webkit滚动条的样式？
我的意思是这些属性
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
这是我的div标签
<div class="scroll"></div>
这是我目前的CSS
.scroll {
width: 200px; height: 400px;
overflow: hidden;
}
scrollbar ×10
css ×5
html ×4
javascript ×4
jquery ×2
c# ×1
css-position ×1
css3 ×1
dart ×1
datagridview ×1
facebook ×1
flutter ×1
jquery-ui ×1
resize ×1
scrollview ×1
winforms ×1
xhtml ×1