标签: overflow

$('.work').click(function(e){
    $('.information-overlay').fadeOut();
    $('.work-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

$('.information').click(function(e){
    $('.work-overlay').fadeOut();
    $('.information-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

我有以下代码可以在.information单击时切换叠加层，并在overflow:hidden与toggleClass.

但是，如果我单击.work和 THEN .information，它会破坏toggleClass.

如何防止水平内div溢出的内容显示？

我有这个 css：

#fixed_menu_div {
    width:200px;
    height:80%;
    float:left;
    left:0;
    overflow-x:none;
    overflow-y:scroll;
    position:fixed;
}

将div显示在页面左侧（或多个）。

它旨在隐藏水平滚动条：

overflow-x:none;

但它仍然显示。我想保留

overflow-y:scroll;

并隐藏水平滚动条。

当我添加像h1with这样的元素时margin: 30px 0;，边距会超出容器！

我以前多次遇到这个问题，我通过使用解决了它 overflow: hidden

我想弄清楚是什么问题以及为什么这个解决方案有效？

在这里找到一个 JSFiddle https://jsfiddle.net/LeoAref/zv6c2c2d/

.container {
  background: #ccc;
}
.container.overflow {
  overflow: hidden;
}
.secTitle {
  margin: 30px 0;
}
code {
  color: blue;
}

<!-- secTitle margin goes outside the container -->
<div class="container">
  <h1 class="secTitle">Container without <code>overflow: hidden</code></h1>
</div>

<!-- works fine here -->
<div class="container overflow">
  <h1 class="secTitle">Container with <code>overflow: hidden</code></h1>
</div>

我正在尝试做一些非常简单的事情。
我有div滚动，我希望覆盖 div 将覆盖所有高度，包括滚动区域。我试过min-height:100%（就像在这个问题中一样）但它不起作用。

这是一个例子https://jsfiddle.net/svfukxjd/2/

.main {
  height: 300px;
  width: 150px;
  background: red;
  overflow: auto;
  position: relative;
}
.cover {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  background: green;
  opacity: 0.5;
}

<div class="main">
  <div>
    Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
  </div>
  <div class="cover">

  </div>
</div>

我有一个 div，其中包含在组件的 render 方法上创建的元素列表。overflow: scroll然而，容器的样式除了最初可见的项目外，滚动条不显示任何其他内容。我想知道反应中是否会出现这种行为以及如何解决它。

<div style={{ margin: 15, marginLeft: 35 }}>
    <div style={{ display: 'flex', flexDirection: 'row' }}>
      <div style={{ marginRight: 10 }}>
        Lorem Ipsum
      </div>
      <div style={{ display: 'block', maxWidth: 300, marginLeft: 20, overflow: 'scroll' }}>
        <div> Item visible </div>
        <div> Item visible </div>
        <div> Item visible </div>
        <div> Item visible </div>

        <div> Item NOT visible </div>
        <div> Item NOT visible </div>
        <div> Item NOT visible </div>
        <div> Item NOT visible </div>
        <div> Item NOT visible …

我创建了以下代码来测试 Float 和 Double Java 数字数据类型的下溢和溢出：

// Float Overflow & Underflow
float floatTest = Float.MAX_VALUE;
floatTest++;
out.println("Float Overflow: " + Float.MAX_VALUE + " + 1 = " + floatTest);
floatTest = Float.MIN_VALUE;
floatTest--;
out.println("Float Underflow: " + Float.MIN_VALUE + " - 1 = " + floatTest);
out.println("");

// Double Overflow & Underflow
double doubleTest = Double.MAX_VALUE;
doubleTest++;
out.println("Double Overflow: " + Double.MAX_VALUE + " + 1 = " + doubleTest);
doubleTest = Double.MIN_VALUE;
doubleTest--;
out.println("Double Underflow: " + Double.MIN_VALUE + …

我有一个包含多个部分的页面（请参阅代码片段或JSFiddle 示例）。

用户应该只能在页面上垂直滚动。

现在，除此之外，我只想水平滚动一个部分：项目（不影响页面的其余部分）。这意味着，除了项目部分，其余部分都必须保持静止。

我怎样才能实现这种部分水平滚动？

.container {
  width: 500px;
  height: 100%;
  overflow-x: scroll;
  background-color: lightgrey;
  padding: 20px;
}

.projects {
  width: 960px;
}

.project {
  display: inline-block;
  float: left;
  width: 300px;
  margin: 0 20px 20px 0;
  background-color: grey;
}

<div class="container">
    <h1>Page</h1>
    <div class="main">
        <h2>Main</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="projects">
        <h2>Projects</h2>
        <div class="project">
            <p>Project</p>
        </div>
        <div class="project">
            <p>Project</p>
        </div>
        <div class="project">
            <p>Project</p>
        </div>
    </div>
</div>

我知道这在这里已经涵盖了很多，但似乎没有一个解决方案对我有用。滚动条仍在 Windows 操作系统（Firefox、Edge 和 IE）上显示。

Note: I don't want to mess with padding/margins

我可以让它消失，但我失去了滚动功能。以下是我尝试过的一些事情，由于我经历了如此多的迭代，我可能会忘记一些。

::-webkit-scrollbar { width: 0px; }
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-hidden-scrollable;

还有一些其他的，但就像我说的，没有任何效果。我确实看到一些常见的解决方案正在将填充更改为人造消失滚动条，但我不想这样做，因为担心它可能会破坏某些设备上的样式。

我也看到了一些建议做纯 javascript，从父组件宽度中减去子组件宽度或类似的东西，但这是一种非常相似的方法，只是更具动态性，我也不想这样做。

我试图用纯 CSS 来实现这一点。想法？

当前代码

.rec-left--body {
      padding: 0px 20px;
      .form-content {
        overflow-y: scroll;                // Chrome    <<  removes scrollbar
        overflow-x: hidden;                // Chrome    <<  removes scrollbar
        -ms-overflow-style: none;          // IE 10+    <<  removes scrollbar
        overflow: -moz-hidden-scrollable;  // Firefox   <<  removes scrollbar
        height: 48vh;
        margin: 10px 0px;
        padding: 0 15px;
        @media (min-width: …

我正在尝试制作一个简单的聊天窗口，其中消息锚定在窗口的右侧和底部。我希望聊天窗口在消息溢出窗口时滚动。

我正在使用 flexbox 来定位消息，并给窗口一个overflow-y: auto;. 由于某种原因，我无法理解这不起作用。如果我从窗口中删除了 flex 定位，滚动会按预期正常工作。为什么 flexbox 会改变滚动行为？

这是一个显示问题的非常简单的代码笔：https ://codepen.io/skypod/pen/OdavbR

.chat-window {
  background-color: grey;
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  overflow-y: auto;
}

.message {
  background-color: blue;
  color: white;
  padding: 0.5rem;
  margin: 0.25rem;
}

<div class="chat-window">
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div …

void main()
{
    long long ll = 2 * 1024 * 1024 * 1024; 
    unsigned long long ull = (2 * 1024 * 1024 * 1024);
    std::cout << ll << "\n" << ull;
}

我使用 Visual Studio 2019 的输出是

 -2147483648
18446744071562067968

我不知道为什么这里会发生溢出，请帮忙