Chrome 删除浏览器中滚动时的反弹，位置问题：固定div

7y4bm7vi 于 11个月前发布在 Go

关注(0)|答案(6)|浏览(102)

我正试图消除在Chrome中滚动时的反弹。你会注意到顶部的白色黑色是固定的，并根据需要在第二个黄色块后面。
我需要做的是删除滚动显示在浏览器中的灰色背景，而不阻止滚动超过顶部的白色块。希望这是有意义的

HTML格式

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

<div id="content">

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

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

字符串

的数据

google-chrome

来源：https://stackoverflow.com/questions/21209223/remove-bounce-on-scroll-in-browser-issue-with-positionfixed-div

6条答案

按热度按时间

dfuffjeb1#

请参阅Unknown's answer以获得更好的解决方案。
以下内容是出于历史目的而留下的：
浏览器中的弹跳滚动是某些版本的iOS / macOS的功能。
为了防止它发生在网站上，我们可以使用以下方法：

CSS

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

#main-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

字符串

HTML格式

<body>
    <div id="main-container">
        ...
    </div>
</body>

型

Demo

赞(0）回复(0）举报 11个月前

c9x0cxw02#

虽然接受的答案工作.这里是一个更简单和更新的版本.

body {
    overscroll-behavior-y: none;
}

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

赞(0）回复(0）举报 11个月前

w46czmvw3#

对于一个相关的问题，这里有一个更简单的答案：OSX - disable inertia scroll for "single-page" webapp

body {
    overflow: hidden;
}

字符串

赞(0）回复(0）举报 11个月前

nnvyjq4y4#

只需在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>

赞(0）回复(0）举报 11个月前

hpxqektj5#

已修改解决方案，以便不在页面中创建新div

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

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

字符串
对我有用，但我不知道这是不是一个好方法

赞(0）回复(0）举报 11个月前

xt0899hw6#

将此规则放置在body标记上在MacOS上的Firefox中对我不起作用，但将其放置在html标记上可以。

html {
  overscroll-behavior: none;
}

字符串

赞(0）回复(0）举报 11个月前

我来回答

Chrome 删除浏览器中滚动时的反弹，位置问题：固定div

6条答案

相关问题

热门标签

最新问答