IOS 스크롤 바운스 - iOS seukeulol baunseu

Question

UPDATE 2017.12: For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it.

목차 Show

Post navigation
iOS 사파리 overscroll/bounce 막기

html, body {
  overscroll-behavior-y: none;
}

Safari however does not support it …

UPDATE 2021.06: The workaround below no longer seems to work in recent iOS/MobileSafari versions (iOS 12+) … 😭. Follow Webkit bug #176454 to stay up-to-date on support in Safari.

Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents?

Bram.us, with bounce scroll

Sometimes – in fullscreen apps for example – you’ll want to disable this. Now, there’s no need to resort to JavaScript and hijack touchstart, as the little CSS snippet below can prevent the rubber band scrolling:

html,
body {
  position: fixed;
  overflow: hidden;
}

Tested with iOS8, iOS9, and iOS10.

However, this snippet disables *all* scrolling on the body. If you want to retain scrolling on your page (but now without the overscroll effect), you need to make use of a scrollable wrapper that spans the entire window/screen and which wraps around your entire content. Like so:

<html>
…
<body>
  <div class="mainwrapper">
    …
  </div>
</body>
</html>

body > .mainwrapper {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* enables “momentum” (smooth) scrolling */
}

You’ll most likely want to remove the margin and padding from the body too in that case 😉

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Mobile

iOS 사파리 overscroll/bounce 막기

2018. 3. 26. 22:01

html,

body {

position: fixed;

overflow: hidden;

}

전체를 감싸는 엘리먼트(예 .wrap)에 아래 스타일 적용

.wrap{

width: 100vw;

height: 100vh;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;

}

I don't want the content of my site sloshing around when the user hits the edge of a page. I just want it to stop.

The omni-present javascript solution I see everywhere is this:

$(document).bind(
   'touchmove',
   function(e) {
     e.preventDefault();
   }
);

But this prevents scrolling entirely. Is there way to just remove the bounce. Preferably with CSS or a meta tag as opposed JS, but anything that works will do.

easwee

15.4k24 gold badges58 silver badges82 bronze badges

asked Dec 9, 2013 at 1:15

emersonthisemersonthis

31.9k56 gold badges202 silver badges350 bronze badges

I have to add another answer. My first approach should work, but, there is an iOS bug, which still bumbs the whole page, even if e.stopPropagation.

mikeyUX find a workaround for this: https://stackoverflow.com/a/16898264/2978727 I wonder why he just get a few clicks for this great idea...

This is how I used his approach in my case:

var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.slideBeginY = event.pageY;
});

content.addEventListener('touchmove', function(event) {
    var up = (event.pageY > this.slideBeginY);
    var down = (event.pageY < this.slideBeginY);
    this.slideBeginY = event.pageY;
    if ((up && this.allowUp) || (down && this.allowDown)) {
        event.stopPropagation();
    }
    else {
        event.preventDefault();
    }
});

answered Dec 9, 2013 at 17:40

2

Disable bouncing by prevent the default behaviour of the document:

document.addEventListener("touchmove", function(event){
    event.preventDefault();
});

Allow scrolling by prevent that the touch reaches the document level (where you would prevent the scrolling):

var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
    event.stopPropagation();
});

Mind the difference between these two:

event.stopPropagation()
event.preventDefault()

StopPropagation should be your choice here ! Here is a very good explanation: http://davidwalsh.name/javascript-events

Edit: Same problem, same solution: document.ontouchmove and scrolling on iOS 5

Edit2: fixed typo in variable names added brackets after methods

answered Dec 9, 2013 at 3:41

Michael PMichael P

5851 gold badge4 silver badges21 bronze badges

6

If apply to Desktop Browser, don't need any JavaScript codes, just few lines of CSS codes:

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

answered Mar 11, 2015 at 11:34

rbtrbt

952 silver badges3 bronze badges

2

I tried lots of different approaches I found here on stackoverflow, but iNoBounce was the thing that really worked for me: https://github.com/lazd/iNoBounce

I just included it in my index.html:

<script src="inobounce.js"></script>

answered Dec 31, 2015 at 11:06

Lesh_MLesh_M

5868 silver badges6 bronze badges

4

This library is solution for my scenarios. Easy way to use just include library and initialize where you want like these;

noBounce.init({   
    animate: true
});

If you want to prevent bouncing only on one element and not on the whole page you can do it like:

 noBounce.init({
    animate: true,
    element: document.getElementById("content")
  });

answered Mar 23, 2016 at 8:26

1

Found a code that worked to me, I believe it will work to you.

The solution is written here: http://apdevblog.com/optimizing-webkit-overflow-scrolling/

Basically, you need to have this js code:

    document.addEventListener("DOMContentLoaded", ready, false);
    document.addEventListener("touchmove", function (evt)
    {
        evt.preventDefault();
    }, false);

    function ready()
    {
        var container = document.getElementsByClassName("scrollable")[0];
        var subcontainer = container.children[0];
        var subsubcontainer = container.children[0].children[0];

        container.addEventListener("touchmove", function (evt)
        {
            if (subsubcontainer.getBoundingClientRect().height > subcontainer.getBoundingClientRect().height)
            {
                evt.stopPropagation();
            }
        }, false);
    }

And then, have your scrollable divs with the class="scrollable".

answered Feb 14, 2014 at 18:15

CesarCesar

3404 silver badges11 bronze badges

0

After trying these suggestions and reading several articles, the fix for me was to use the CSS property < overflow-x: hidden; > on the problematic element/container.

answered May 30, 2019 at 22:27

아이폰 웹뷰 바운스 아이폰 스크롤 오류 아이폰 스크롤바 보이기