有人能帮帮我吗？我想为滚动条做一个简单的样式.我在互联网上找到了一些信息并试了一下,但似乎由于某些原因它并没有真正起作用.刷新页面时滚动条看起来很好,但只要触摸滚动条就会发疯.它充满了很多颜色,你无法理解这是一个滚动条.
在你触摸之前它的外观如何 - http://i40.tinypic.com/a2evro.png
在这里它是如何触摸它 - http://i44.tinypic.com/qzkirn.png
这是我放在css中的代码:
::-webkit-scrollbar {
width: 16px;
height: 16px; }
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }
谢谢你们.干杯.亚历克斯
是否可以在滚动条项目或滚动条轨道周围添加填充或边距？我试过了,只能填充顶部/底部.向UL添加填充对滚动条没有影响.滚动条上的负边距无效.想法？ JS小提琴在这里.
::-webkit-scrollbar {
width: 12px;
margin:10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
(关于Stack Overflow的第一个问题.希望我做得对.)
我正在尝试创建一个浮动菜单,从其内容继承其宽度(因为我事先不知道宽度,即从URL加载).我可以通过将菜单div绝对定位而不设置宽度或高度来实现这一点.
当内容足够高以至于需要滚动时,会出现此问题.我设置"overflow:auto;" 这样它可以垂直滚动,但新的滚动条不会使div更宽.相反,div保持相同的宽度,并且滚动条突出到其先前大小合适的内容,迫使内容换行.
在示例中:在Firefox中,"five"被包裹到下一行,但在Chrome中(至少对于Mac),它全部显示在一行上.
没有明确设置菜单的宽度以包括滚动条的宽度,任何优雅的方式来做到这一点？
谢谢!
有没有办法将滚动条添加到'td'标签？我在'td'标签内有动态内容.我希望'td'具有固定大小,如果内容变得大于'td'大小,我希望滚动条仅出现在该特定单元格上.有没有办法实现这个目标？
我有这个可滚动的框架(实际上是画布内的框架).
import Tkinter as tk
class Scrollbarframe():
def __init__(self, parent,xsize,ysize,xcod,ycod):
def ScrollAll(event):
canvas1.configure(scrollregion=canvas1.bbox("all"),width=xsize,height=ysize,bg='white')
self.parent=parent
self.frame1=tk.Frame(parent,bg='white')
self.frame1.place(x=xcod,y=ycod)
canvas1=tk.Canvas(self.frame1)
self.frame2=tk.Frame(canvas1,bg='white',relief='groove',bd=1,width=1230,height=430)
scrollbar1=tk.Scrollbar(self.frame1,orient="vertical",command=canvas1.yview)
canvas1.configure(yscrollcommand=scrollbar1.set)
scrollbar1.pack(side="right",fill="y")
canvas1.pack(side="left")
canvas1.create_window((0,0),window=self.frame2,anchor='nw')
self.frame2.bind("<Configure>",ScrollAll)
我想将鼠标滚轮绑定到滚动条,以便用户可以向下滚动框架,而无需使用滚动条上的箭头按钮.环顾四周后,我添加了一个canvas1像我这样的绑定
self.frame1.bind("<MouseWheel>", self.OnMouseWheel)
这是功能:
def OnMouseWheel(self,event):
self.scrollbar1.yview("scroll",event.delta,"units")
return "break"
但是当我使用鼠标滚轮时,滚动条不会移动.谁能帮我这个？我想要的只是当用户使用鼠标滚轮(在框架区域内/滚动条上)时,画布应自动向上或向下滚动.
当我将Chrome窗口的尺寸设置为328 x 455像素时,我仍会看到水平滚动条.如何找出导致此问题的元素？我一直在通过开发者控制台查找元素,但找不到元素.
然后我尝试了我在这里找到的脚本,但没有记录任何内容.我在元素和其他一些人上尝试过body,section1但不知道还能做什么.
$(function () {
var f = $('body'); //document.getElementById("body");
var contentHeight = f.scrollHeight;
var declaredHeight = $(f).height();
var contentWidth = f.scrollWidth;
var declaredWidth = $(f).width();
if (contentHeight > declaredHeight) {
console.log("invalid height");
}
if (contentWidth > declaredWidth) {
console.log("invalid width");
}
});
我的CSS看起来像这样:
div.SOMECLASS {
position: absolute;
max-height: 300px
height: auto;
width: auto;
overflow: auto;
...
}
div高度和宽度自动缩放.虽然高度已固定最大值:一旦达到此值,就会出现垂直滚动条.这很有效.
现在的问题:
如果垂直滚动条出现,他们使用了周围的10px的水平空间,如滚动条将放在里面的div.
但是,宽度不是自动调整的,以允许垂直滚动条使用的这些额外的10个像素.由于添加垂直滚动条之前的水平宽度恰好适合内容(正如width:auto设置所预期的那样),div现在还显示水平滚动条 - 允许缺少10个像素.这太傻了.
div以使垂直滚动条适合？如果可能的话我找的不依赖于只是完全禁用水平滚动,因为这可能会在某些时候需要(即对某些输入)的解决方案.
在"固定"定位元素上使用z-index CSS属性在Chrome下给我一个奇怪的行为.
当Firefox和Opera浏览器给我等待结果时,Chrome似乎不尊重z-index属性,在红色叠加层上方显示滚动条(参见代码和Fiddle bellow).
HTML:
<div class="left">
<div class="placeholder"></div>
</div>
<div class="right"></div>
<div class="overlay"></div>
CSS:
.left {
background-color: yellow;
bottom: 0;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 35%;
z-index: 10;
}
.right {
background-color: orange;
bottom: 0;
position: fixed;
right: 0;
top: 0;
width: 65%;
z-index: 20;
}
.overlay {
background-color: red;
bottom: 20%;
left: 25%;
position: fixed;
right: 25%;
top: 20%;
z-index: 40;
}
.placeholder {
height: 3000px;
}
示例:http: //jsfiddle.net/kvNFW/
操作系统:Apple Mac OS …
在.NET 3.5中,我在窗口中有一个网格.我用Buttons填充这个Grid.当按钮填满网格并离开视图时,网格不显示滚动条.我已将网格垂直滚动设置为可见但仍未显示.
<Window x:Name="Window" x:Class="MergeToCheck.CheckList"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Loaded="Window_Loaded" ScrollViewer.VerticalScrollBarVisibility="Disabled"
ResizeMode="NoResize" ShowInTaskbar="False" Topmost="True" WindowStyle="None"
Height="671" Width="846.299" BorderThickness="5">
<Grid>
<Grid x:Name="MyGrid" HorizontalAlignment="Left" Height="535" VerticalAlignment="Top" Width="736" Margin="10,63,0,0" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<Grid.Resources>
<Style TargetType="{x:Type Panel}">
<Setter Property="Margin" Value="0,0,0,6" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
</Grid>
</Window>
添加按钮的代码:
CheckList CheckListCtrl = new CheckList();
System.Windows.Controls.Button btn;
int row = 0;
int col = 0;
CheckListCtrl.MyGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(100) });
foreach(var c in list)
{
btn …使用最新版本的ui-grid(v3.0.0-rc.16),可以单独关闭水平和垂直滚动条.我通过交换得到了这个
$scope.gridOptions.enableScrollbars = false;
同
$scope.gridOptions.enableHorizontalScrollbar = 0;
$scope.gridOptions.enableVerticalScrollbar = 0;
在ui-grid的源代码中,为滚动条定义了三个常量:
scrollbars: {
NEVER: 0,
ALWAYS: 1,
WHEN_NEEDED: 2
}
面对ui-grid仍然不稳定且经常变化的事实,我会觉得使用这些常量而不是特定值更舒服.但我怎样才能访问它们？
Plunker:http://plnkr.co/edit/h0ewAZK616rKCH3T62te