Question

我正在尝试在Chrome中滚动时移除反弹。您会注意到顶部的白色黑色是固定的，并且根据需要位于第二个黄色块的后面。

我需要做的是删除滚动以在浏览器中显示灰色背景，而不会阻止滚动顶部白色块。希望它有意义

HTML

<div class="project">
</div>

<div id="content">

    <div class="warface">   
    </div><!-- END warface -->

</div><!-- END content -->

enter image description here

Answer 1

浏览器中的弹跳滚动是某些OSX版本的功能。

为防止它在您的网站上发生，您可以使用以下内容：

<强> CSS

html, body {
    height: 100%;
    overflow: hidden;
}

#mainContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

<强> HTML

<body>
    <div id="mainContainer">
        ...
    </div>
</body>

<强> Demo

Answer 2

虽然接受的答案有效。这是一个更简单的更新版本。

body {
    overscroll-behavior-y: none;
}

然而，它不适用于 IE 和 Safari，这是不幸的。 Here 是浏览器支持。

Answer 3

这里建议一个更简单的答案来解决相关问题：OSX - disable inertia scroll for "single-page" webapp

body {
    overflow: hidden;
}

Answer 4

修改了不在页面中创建新div的解决方案

html {
    height: 100%;
    overflow: hidden;
}

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

为我工作，但我不知道这是否是一个好方法

Answer 5

只需在 body 标签上使用这个属性：

body{
overscroll-behavior: none;
}

<html>
<body>
<div>
    <h1>Lorem ipsum dolor.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
</div>
</body>
</html>

Answer 6

将此规则放在 body 标签上对我来说在 MacOS 上的 Firefox 中不起作用，但将它放在 html 标签上。

html {
  overscroll-behavior: none;
}

在浏览器中滚动时删除反弹，发出位置：固定div

6 个答案: