标签: scrollbar

我正在尝试建立一个有很多宽度和高度相同的盒子的网站.例如,我有一个页面,它有两个相同大小的框并排.

简单的解决方案是将宽度和高度设置为50vw.这有效,直到有一个滚动条.我用Google搜索了几个小时,无法理解为什么在地球上vw和vh会将滚动条包含在视口中.

这是我的问题的一个例子

HTML

<div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
</div>
<div class="lotta-content"></div>

CSS

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
}

.box {
    float: left;
    width: 50vw;
    height: 50vw;
}

.red {
    background-color: red;
}

.green {
    background-color: green;   
}

.lotta-content {
    height: 10000px;   
}

注意不需要的水平滚动条

https://jsfiddle.net/3z887swo/

一种可能的解决方案是使用宽度的百分比,但是使用高度的vw,但它不会是一个完美的盒子,这不是世界上最糟糕的东西,但仍然不理想.这是一个样本

https://jsfiddle.net/3z887swo/1/

有谁知道为什么vw/vh包含滚动条作为视口的一部分？此外,如果某人有比我自己更好的解决方案,我很乐意听到.我正在寻找一个纯CSS解决方案.我宁愿没有javascript.

我的导航栏中有一个引导下拉列表,显示了一个通知列表.这是非常标准的代码,但我设置max-height: 300px;和overflow-y: scroll;开启ul元素.在Chrome或Firefox的Mac上查看时,在高度达到> 300px并且ul溢出滚动之前,没有滚动条.但是在Windows(Chrome或IE)上,垂直滚动条始终存在,这真的很烦人.有没有办法关闭Windows上的滚动条或隐藏它直到它实际需要？

以下是下拉列表的代码:

<li class="dropdown notifier">
    <div class="dropdown-toggle" style="width:initial;">
        <div class="dropdown-link nav-dropdown-link" id="dropdownMenuNotifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa" ng-class="unreadNotices > 0 ? 'fa-bell-o red' : 'fa-bell-o'" style="position:absolute;right:5px;"></i>&nbsp;
            <div class="counter" ng-if="unreadNotices > 0">{{unreadNotices}}</div>
        </div>
        <ul class="dropdown-items dropdown-menu account" aria-labelledby="dropdownMenuNotifications">
            <li>
                <a href="#" class="title"><span>Notifications</span></a>
            </li>
            <li ng-if="notices.length === 0">
                <a href="#" style="cursor:default;">
                    <div class="notice-text">
                        <span>No notifications at the moment</span>
                    </div>
                </a>
            </li>
            <li ng-repeat-start="n in notices" ng-if="!n.read">
                <a href="#" class="unread" ng-if="n.action" ng-click="markRead(n, …

我对TableViewController有一个奇怪的问题.在文档中,它表示当表格"超大"时,tableViewController还处理方法-flashScrollIndicators,尊重可见区域.

My app consists in 3 nav controller loaded in a tab controller. Each nav controller has as root view controller a subclass of a table view controller. Each "model" is populated from a plist file, that loads its contents into an array in the -viewDIdLoad, later everything is passed to the table. Everything is loaded programmatically no IB.

I've found out in my app that when it loads the first view (a nav controller with a table view controller …

假设我们有一个高大的html页面.所以会有一个垂直滚动条.

当用户向下滚动时,我想知道他使用javascript(jquery)滚动了多少我觉得......这可能吗？

所以...有人知道怎么做吗？...

在面板中很容易,因为我们可以将"AutoScroll"属性设置为true ...但是groupbox没有它.

无论如何...存在某种方式吗？,提前谢谢;-).

所以我正在使用tkinter库创建一个rss阅读器,在我的一个方法中,我创建了一个文本小部件.它显示正常,直到我尝试向其添加滚动条.

这是滚动条前的代码:

   def create_text(self, root):
        self.textbox = Text(root, height = 10, width = 79, wrap = 'word')
        self.textbox.grid(column = 0, row = 0)

这是我的代码之后:

def create_text(self, root):
        self.textbox = Text(root, height = 10, width = 79, wrap = 'word')
        vertscroll = ttk.Scrollbar(root)
        vertscroll.config(command=self.textbox.yview)
        vertscroll.pack(side="right", fill="y", expand=False)
        self.textbox.config(yscrllcommand=vertscroll.set)
        self.textbox.pack(side="left", fill="both", expand=True)
        self.textbox.grid(column = 0, row = 0)

这给了我错误

_tkinter.TclError:不能在.56155888里面使用几何管理器包,它已经有一行由网格管理的子行在vertscroll.pack(side ="right",fill ="y",expand = False)

任何想法如何解决这一问题？

我的Datagrid对ObservableCollection有一个绑定,并在对EF提取的一些值进行分组后得到填充.

我的问题是,datagrid-height超出了窗口大小.有谁知道如何解决这个问题...我几乎用谷歌搜索死了......:o

<UserControl x:Class="UltranizerV2.Views.Storage.InventoryList"
             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">
    <Grid>
        <Grid.RowDefinitions>

            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="25"></RowDefinition>
        </Grid.RowDefinitions>


        <DockPanel  Grid.Row="0" >
            <DataGrid ItemsSource="{Binding PresentableInventoryItems}" VerticalAlignment="Stretch" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Produkttitel" Width="350" Binding="{ Binding ProductTitle}"/>
                <DataGridTextColumn Header="Sku" Width="100" Binding="{ Binding Sku}" />
                <DataGridTextColumn Header="Menge" Width="60"  Binding="{ Binding Quantity}" />
            </DataGrid.Columns>    
            </DataGrid>
        </DockPanel>
        <Label Grid.Row="1">Arsch</Label>
        </Grid>

</UserControl>

有没有办法在类似于ScrollPane的TableView中更改ScrollBar的策略？我只看到TableView的VirtualFlow计算可见性,但不存在手动干扰的可能性.

我需要垂直滚动条始终可见,水平从不.更改条形的可见状态不起作用.

例:

import java.time.LocalDate;
import java.time.Month;
import java.util.Set;

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

import com.sun.javafx.scene.control.skin.VirtualFlow;

public class ScrollBarInTableViewDemo extends Application {

    private TableView<Data> table1 = new TableView<>(); // table with scrollbars
    private TableView<Data> table2 = new TableView<>(); // table without scrollbars

    private final ObservableList<Data> data =
            FXCollections.observableArrayList( 
                    new Data( LocalDate.of(2015, Month.JANUARY, 10), …

我正在尝试使用 CSS 设置滚动条的样式。我想实现以下外观（忽略背景）：

换句话说，我希望拇指比轨道粗，我只想成为一条线。

我对此进行了研究，并为想要做相反事情的人找到了解决方案。这比轨道小一个拇指，但无法实现我想要的。

作为另一种选择，我曾想过使用带有负偏移量的 border-right 属性，但还是没有运气。唯一的轮廓有偏移和轮廓四边。

任何建议将不胜感激。

我需要帮助向我的老板解释为什么她的设计在客户的网站上很差.她不了解网络,作为一名网络开发人员,与一位平面设计师(甚至不是网页设计师)合作也很困难.在她设计的当前网站上,根据她的说法,图像栏"需要"为~1200px,尽管内容没有必要.快速草图说明发生了什么:

如您所见,横幅溢出了960px的内容,宽达1200px.当在960px宽视口中可以查看所有内容时,这将创建水平滚动.我需要将它设为<img>而不是CSS背景,因为它是一个jQuery幻灯片,从图像到图像逐渐消失.

我认为这是一个很大的问题,因为当他们仍然可以看到所有相关内容时,很多人会在他们的浏览器中获得一个水平滚动条.她认为没有人会注意到它会没事; 我认为这对最终用户来说是非常糟糕的做法和困惑.

我该如何向她解释这个问题？