关于overflow:scroll失效的原因！

Posted 2023-05-01

<div style="height:400px; width:400px; overflow-x:scroll; overflow-y:hidden;">
<div style="width:400px; height:200px; border:1px solid red; float:left;"></div>
<div style="width:400px; height:300px; border:1px solid red; float:left;"></div>
</div>
代码如上，为什么没有出现横向滚动条！内层明明已经设置了float:left却失效了！大神求解答啊！

如果想要横向的滚动条出现，要将你展示的内容层定一个比外层宽的像素就可以了。追问

我只想知道，为什么，浮动会失效！

追答

浮动没有失效，只是你的外层div的宽度有限制了，外层满足不了内层的需求，所以自动换成第二行的左浮动了。改变外层就可以看到效果了。

追问

改变外层，那就不是我想要的了！

参考技术A <div style="height:400px; width:400px; overflow-x:scroll; overflow-y:hidden;">
<div style="width:800px;">
<div style="width:400px; height:200px; border:1px solid red; float:left;"></div>
<div style="width:400px; height:300px; border:1px solid red; float:left;"></div>
</div>
</div>本回答被提问者和网友采纳

Flutter web 中是不是有相当于 `overflow:scroll` 的功能？

【中文标题】Flutter web 中是不是有相当于 `overflow:scroll` 的功能？

【英文标题】：Is there an equivalent to `overflow:scroll` in Flutter web?Flutter web 中是否有相当于 `overflow:scroll` 的功能？

【发布时间】：2020-11-23 23:15:07

【问题描述】：

我正在尝试访问浏览器的本机滚动条（在此处查看右侧的内容）。通常，如果一个小部件的内容超出了视口，Flutter 会抛出一个错误，如：A RenderFlex overflowed by 445 pixels on the bottom. 是否有设置或其他东西可以告诉 Flutter web 让那个特定的小部件可滚动？如果我们使用 Scrollbar 小部件，它就不能拖动，而且 DraggableScrollbar 小部件看起来很奇怪，并且实现代码远远超过我的工资等级。我只想要我祖父母习惯的普通滚动条。

【问题讨论】：

这能回答你的问题吗？ scrollbar with drag effect in flutter

那个是不可拖动的，长官。但是下面的确实回答了我的问题（这就是我将其标记为这样的原因）。谢谢你的出现。你戴口罩并保持安全吗？

【参考方案1】：

我写了完整的步骤，因为也许有人会第一次使用DraggableScrollbar 小部件。

1. 将此添加到 pubspec.yaml 依赖项：

draggable_scrollbar: ^0.0.4

2. 导入包：

import 'package:draggable_scrollbar/draggable_scrollbar.dart';

3.定义一个ScrollController：

final ScrollController _scrollController = ScrollController();

4.用法：

@override
  Widget build(BuildContext context) 
    return Scaffold(
        body: Center(
          child: DraggableScrollbar.rrect(
            controller: _scrollController,
            heightScrollThumb: 100,
            backgroundColor: Colors.yellow,
            child: ListView.builder(
              controller: _scrollController,
              itemExtent: 150.0,
              itemCount: 50,
              itemBuilder: (context, index) 
                return Container(
                  child: Card(
                    child: Center(
                      child: Text(index.toString()),
                    ),
                  ),
                );
              ,
            ),
          ),
        ),
    );
  

【讨论】：

谢谢。我看到一堆嵌套在彼此内部的小部件。我放置实际内容的确切位置在哪里？是在最后一个Container里面吗？

您希望它可滚动的小部件是什么？您需要将ListView.builder 替换为该小部件（将ScrollableBar.rrect 的子级设置为可滚动小部件）。 @Andreişăranu

我只想要一个包含一堆容器的列，只要它有空间呈现，它就会滚动。所以我猜 SingleChildScrollView 会代替 ListView 工作。我可以给它同样的_scrollController。对吗？

用ListView 包装容器并将ListView 设置为ScrollableBar.rrect 的子级。 @Andreişăranu

别忘了为ListView设置控制器。如果您遇到任何问题，请告诉我。 @Andreişăranu