标签: scrollbars

如何知道滚动条是否出现在浏览器(jQuery)中？

我需要知道,浏览器窗口中是否出现了垂直滚动条.是否可以使用jQuery或任何其他方式？

6
推荐指数

1
解决办法

8810
查看次数

大家好我正在尝试使用CSS构建布局,我遇到了一个奇怪的问题.对我来说很奇怪.我有3个div的一个标题,一个页脚和搜索Maincontent区域.页眉和页脚必须保持100%的恒定宽度,而MainContent区域必须以996px为中心固定; 这很好,但是当我将浏览器窗口的大小调整为低于996px的宽度然后向右滚动窗口的内容时,100%页眉和页脚似乎被截断并且不再是100%.我已经敲了一个简单的赤裸脚本来说明问题(样式内联以保持紧凑).我知道我可以添加溢出:隐藏到每个容器,以便在调整窗口大小时关闭滚动条.如果宽度低于某个宽度,我还写了一小段jQuery来强制div回到宽度.不过我的问题是围绕CSS,是否有更好的纯CSS修复此问题？或者任何人都可以解释为什么会这样？先感谢您!DotsC

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">

    <div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>

    <div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
        <div id="inner-content">
            CONTENT OF THE PAGE HERE
        </div>
    </div>
    <div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

css scrollbars width

Dot*_*tsC

2010 09-27

6
推荐指数

2
解决办法

1万
查看次数

如何检测浏览器窗口中是否有滚动条？

我需要能够检测浏览器窗口上是否有滚动条(垂直和水平).我一直在使用这段代码,但它在Firefox 5中无法正常运行.

JFL.GetScrollbarState = function () {
    var myWidth = 0;
    var myHeight = 0;
    if (document.documentElement && document.documentElement.clientWidth) {
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else {
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return ({
        vScrollbar: document.body.scrollHeight > myHeight,
        hScrollbar: document.body.scrollWidth > myWidth
    });
}

Run Code Online (Sandbox Code Playgroud)

有没有更好的方法来实现跨浏览器的工作.我的浏览器目标是Firefox 4-5,Chrome,Safari 4 +,Opera 10+.

如果你对我为什么需要知道是否有滚动条感兴趣,那是因为我有一些旋转的CSS3过渡(由于它们旋转的性质)可能会暂时超出当前文档大小的边缘(从而制作文档暂时更大).如果最初没有滚动条,则CSS3转换可能会导致滚动条在转换期间显示,然后在转换完成时消失,从而导致滚动条闪烁.如果我知道没有滚动条存在,我可以暂时添加一个类,将overflow-x或overflow-y设置为hidden,从而防止CSS3过渡期间滚动条闪烁.如果滚动条已经存在,我不需要做任何事情,因为它们可能会移动一点,但它们不会在转换期间打开/关闭.

奖励积分,如果可以真正告诉不仅当滚动条一般会被要求,但他们是否真正存在与否.

javascript scrollbars scrollbar

jfr*_*d00

2011 07-07

6
推荐指数

1
解决办法

6354
查看次数

如何格式化textarea上的滚动条样式？

我确信这不应该像看起来那么困难......我不能使用JQuery scrollpane,因为我需要它在提交时充当标准格式textarea ..需要在IE7 +,Safari&中工作firefox至少......任何想法？

试过这个......

textarea {
    scrollbar-face-color: #ff8c00;
    scrollbar-track-color: #fff8dc;
    scrollbar-arrow-color: #ffffff;
    scrollbar-highlight-color: #fff8dc;
    scrollbar-shadow-color: #d2691e;
    scrollbar-3dlight-color: #ffebcd;
    scrollbar-darkshadow-color: #8b0000;
}

Run Code Online (Sandbox Code Playgroud)

...但仅适用于IE？

有任何想法吗？？

css textarea scrollbars

Chr*_*ers

2011 08-16

6
推荐指数

2
解决办法

1万
查看次数

使用overflow-x:hidden时Firefox中的两个垂直滚动条

我刚刚为客户建立了一个网站,我遇到了一个奇怪的问题,只出现在Firefox浏览器中.

在页面顶部,我有一个填充浏览器宽度的导航栏.我已经使用这里描述的技术http://css-tricks.com/full-browser-width-bars/来尽可能地在语义上实现效果.然后我不得不将overflow-x:隐藏在html和body标签上,以防止用户滚动屏幕右侧.

这在我从Mac/PC上的Safari,Opera,Chrome和天堂禁止测试的每个浏览器中都很有效,但即使是IE7,8和9也想玩得很好.但是,哦,没有Firefox只是不想与它一起去.

虽然我没有水平滚动条这是所希望的效果,但Firefox决定将垂直滚动条的数量加倍.如果使用鼠标我无法水平滚动,但是当我在Mac上使用触控板时,垂直移动受到限制,这意味着我无法向下滚动页面,如果我用两根手指滑动,页面会水平滚动到遗忘状态.

我在谷歌和其他地方发现的唯一一件事就是这种行为是Firefox中的一个错误？

对此烦恼的任何帮助非常感谢,非常感谢.

更新:添加代码

基本上代码就是这个,因为太多了.我会指向你的网站,但客户不希望它活着.开始了:

<nav id="menu">
    <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
    </ul>
</nav>

Run Code Online (Sandbox Code Playgroud)

然后css是一个全宽度浏览器栏作为上面的链接:

html,body{
    overflow-x: hidden; /*This prevents the user from scrolling horizontally*/
}

#menu{
    position: relative;
    background: blue;
}

#menu:before, #menu:after{
    content:'';
    position: absolute;
    background: inherit;
    top: 0;
    bottom: 0;
    width: 9999px; /*huge width to ensure bar fills browser*/
}

#menu:before{
    right: 100%;
}

#menu:after{
    left: 100%;
}

Run Code Online (Sandbox Code Playgroud)

firefox scrollbars overflow css3

Mar*_*vey

2012 02-04

6
推荐指数

2
解决办法

1万
查看次数

Windows 中几乎所有浏览器上的滚动条（Mac 除外）

我有一个 div 用作弹出窗口（绝对位置等）。现在我正在不同的平台上进行测试，我发现在 Windows 上的几乎每个浏览器中我都会看到滚动条，即使没有什么可滚动的......但在 Mac 上却不然。我附上一张图片，这只是众多案例之一。我不想要那些滚动条，我该怎么办？我尝试过溢出：隐藏；并用谷歌搜索了很多，但似乎找不到解决方案！非常感谢任何帮助！

css windows macos scrollbars

Mel*_*vin

lucky-day

6
推荐指数

1
解决办法

6523
查看次数

Adobe Flex/AIR:滚动子组件,而不是整个窗口

我正在使用Adobe Flex和AIR开发一个应用程序,我一直在试图弄清楚如何解决滚动问题.

我的主应用程序窗口的基本结构(大大简化)是这样的:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   paddingTop="0" paddingRight="0" paddingBottom="0" paddingLeft="0"
   width="800" height="600" layout="vertical" verticalAlign="top" 
>
   <mx:VBox id="MainContainer" width="100%" height="100%">
      <mx:Panel id="Toolbars" width="100%" height="25" />
      <mx:HDividedBox width="100%" height="100%" >
         <mx:Panel id="Navigation" minWidth="200" height="100%" />
         <mx:VBox id="MainContent" width="100%">
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
         </mx:VBox>
         <mx:Panel id="HelpContent" minWidth="200" height="100%" />
      </mx:HDividedBox>
      <mx:Panel id="FooterContent" width="100%" height="25" />
   </mx:VBox>
</mx:WindowedApplication>

Run Code Online (Sandbox Code Playgroud)

问题是"MainContent"框可能包含一个巨大的子组件列表,并且该长列表的存在导致垂直滚动条出现在GUI的最高级别,围绕"MainContainer"vbox.

看起来很傻,在整个应用程序窗口周围都有滚动条.

我正在寻找的是一种解决方案,其中滚动条仅应用于"MainContent"vbox(以及Navigation和HelpContent面板,如果它们的内容超出窗口边界).

我在StackOverflow上找到了一个相关的问题,问题的解决方案是在父容器上使用"autoLayout"和"verticalScrollPolicy"属性.

所以我尝试将autoLayout ="false"和verticalScrollPolicy …

apache-flex air layout scrollbars

ben*_*ith

2017 05-23

5
推荐指数

2
解决办法

7258
查看次数

自定义Mac Scrollbars与Cocoa

如何使用cocoa创建自定义滚动条？

cocoa scrollbars objective-c

nan*_*ome

lucky-day

5
推荐指数

1
解决办法

3476
查看次数

目标C的例子寻求

我正在尝试将滚动条添加到IKImageView.基本上,在那一刻,我需要将图像加载到一个视图程序的一些例子,如果窗口太小,树立的是做正确的事...滚动条

为什么我在apple dev网站上找不到这些例子？

补充信息:

看完ImagekitDemo后,我发现显然我需要在ScrollView中嵌入IKIMageView.(并以某种方式使IKImageView的has___Scroller属性为YES ...)

不过,现在(这是在ImageKitDemo也是如此)滚动条都很好,只要只需要一个(或没有).但是,只要两者都需要,并且窗口的任何一个尺寸都小于图像,两个滚动条就会消失.

鼠标滚动仍然有效.

macos scrollbars objective-c ikimageview

Bri*_*tow

2012 05-03

5
推荐指数

1
解决办法

1549
查看次数

无法在WPF TextBlock中获取垂直滚动条

我在wpf TextBlock控件(.Net 3.5)中呈现文本.文本块的内容取决于用户在列表框中选择的内容.文本换行,所以我不需要水平滚动条.但是,文本通常比窗口显示的数量多,所以我需要一个垂直滚动条.

当我开始搜索时,我很快发现答案是将TextBlock包装在ScrollViewer中.然而,它不起作用(TM),我希望有人可以帮助我找出原因.

这是UI代码的结构:

<Window x:Class=..>
    <StackPanel>
        <ListBox HorizontalAlignment="Stretch"
                 VerticalAlignment="Top"  Height="200"
                 SelectionChanged="listbox_changed" SelectionMode="Single">
        </ListBox>
        <Button Click="Select_clicked">Select</Button>
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <TextBlock Name="textblock" TextWrapping="Wrap"/>
        </ScrollViewer>
    </StackPanel>
</Window>

Run Code Online (Sandbox Code Playgroud)

当用户选择列表框中的项目时,与该项目关联的某些文本将显示在TextBlock中.我原以为代码应该是所有必需的代码,但它从来没有为我提供滚动条.

搜索和试验给了我两条线索:问题的根源可能与我动态更新TextBlock的内容有关,而TextBlock不会根据新内容调整自身大小.我找到了一个似乎相关的帖子,通过将TextBlock的高度设置为其ActualHeight(在更改其内容之后),它会起作用.但它没有(我看不出这个效果).

其次,如果我设置ScrollViewer的高度(在设计时间内),那么我会得到一个垂直滚动条.例如,如果我在上面的xaml中将它设置为300,结果几乎是好的,因为第一次打开的窗口包含一个带有垂直滚动条的TextBlock(当且仅当我需要它时).但是如果我让窗口变大(在运行时使用鼠标调整窗口大小),ScrollViewer不会利用新的窗口大小,而是根据xaml保持其高度,这当然不会.

希望,我只是忽略了一些明显的东西......

谢谢!

wpf scrollbars textblock

Kri*_*fer

lucky-day

5
推荐指数

1
解决办法

1万
查看次数