Remove bounce on scroll in browser, issue with position:fixed div

后端未结

关注

 3  1535

I\'m trying to remove the bounce when scrolling in chrome. You\'ll notice the top white black is fixed and behind the second yellow block as desired.

What I need to

相关标签:

3条回答

我在风中等你

2020-12-14 07:42
Modified the solution to not create a new div in the page
```
html {
    height: 100%;
    overflow: hidden;
}

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}
```
Worked for me but I didn't know if it's a good way to do
0 讨论(0)
发布评论:

提交评论
- 加载中...
难免孤独

2020-12-14 07:58
There's a simpler answer suggested here for a related question: OSX - disable inertia scroll for "single-page" webapp
```
body {
    overflow: hidden;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

失恋的感觉

2020-12-14 08:02

Bounce scroll in the browser is a feature of some versions of iOS / macOS.

To prevent it from happening on a website we can use the following:

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)