How to prevent momentum scrolling from freezing the scrolling of a scrollable div?
I am developing a mobile web app that contains a scroll-able div with content in. The requirements are for the div to have momentum-based scrolling. I'm setting -webkit-overflow-scrolling: touch; to get the momentum. But then if you swipe anywhere in the app outside the scroll-able div it locks all scrolling until you don't touch the screen for about a second.
Here is an example with -webkit-overflow-scrolling: touch;
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style rel="stylesheet">
body {
position: fixed;
}
.wrapper {
overflow-y: scroll;
height: 300px;
border: 2px solid red;
font-size: 120px;
-webkit-overflow-scrolling: touch; /* momentum scrolling */
}
</style>
</head>
<body>
<div class="wrapper">Scroll Me! Scroll Me!</div>
</body>
</html>
And without for comparison
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style rel="stylesheet">
body {
position: fixed;
}
.wrapper {
overflow-y: scroll;
height: 300px;
border: 2px solid red;
font-size: 120px;
}
</style>
</head>
<body>
<div class="wrapper">Scroll Me! Scroll Me!</div>
</body>
</html>
Is there a way to get both momentum based scrolling in the div and not have it freeze the scrolling if you swipe on the body? I do not need the body to scroll at all, it is fixes at the same height and width as the screen.
css css3 web-applications scroll mobile-safari
asked Jan 3 at 16:04
KennyKenny
12
add a comment |
I am developing a mobile web app that contains a scroll-able div with content in. The requirements are for the div to have momentum-based scrolling. I'm setting -webkit-overflow-scrolling: touch; to get the momentum. But then if you swipe anywhere in the app outside the scroll-able div it locks all scrolling until you don't touch the screen for about a second.
Here is an example with -webkit-overflow-scrolling: touch;
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style rel="stylesheet">
body {
position: fixed;
}
.wrapper {
overflow-y: scroll;
height: 300px;
border: 2px solid red;
font-size: 120px;
-webkit-overflow-scrolling: touch; /* momentum scrolling */
}
</style>
</head>
<body>
<div class="wrapper">Scroll Me! Scroll Me!</div>
</body>
</html>
And without for comparison
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style rel="stylesheet">
body {
position: fixed;
}
.wrapper {
overflow-y: scroll;
height: 300px;
border: 2px solid red;
font-size: 120px;
}
</style>
</head>
<body>
<div class="wrapper">Scroll Me! Scroll Me!</div>
</body>
</html>
Is there a way to get both momentum based scrolling in the div and not have it freeze the scrolling if you swipe on the body? I do not need the body to scroll at all, it is fixes at the same height and width as the screen.
css css3 web-applications scroll mobile-safari
asked Jan 3 at 16:04
KennyKenny
12
add a comment |
I am developing a mobile web app that contains a scroll-able div with content in. The requirements are for the div to have momentum-based scrolling. I'm setting -webkit-overflow-scrolling: touch; to get the momentum. But then if you swipe anywhere in the app outside the scroll-able div it locks all scrolling until you don't touch the screen for about a second.
Here is an example with -webkit-overflow-scrolling: touch;
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style rel="stylesheet">
body {
position: fixed;
}
.wrapper {
overflow-y: scroll;
height: 300px;
border: 2px solid red;
font-size: 120px;
-webkit-overflow-scrolling: touch; /* momentum scrolling */
}
</style>
</head>
<body>
<div class="wrapper">Scroll Me! Scroll Me!</div>
</body>
</html>
And without for comparison
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style rel="stylesheet">
body {
position: fixed;
}
.wrapper {
overflow-y: scroll;
height: 300px;
border: 2px solid red;
font-size: 120px;
}
</style>
</head>
<body>
<div class="wrapper">Scroll Me! Scroll Me!</div>
</body>
</html>
Is there a way to get both momentum based scrolling in the div and not have it freeze the scrolling if you swipe on the body? I do not need the body to scroll at all, it is fixes at the same height and width as the screen.
css css3 web-applications scroll mobile-safari
asked Jan 3 at 16:04
KennyKenny
12
I am developing a mobile web app that contains a scroll-able div with content in. The requirements are for the div to have momentum-based scrolling. I'm setting -webkit-overflow-scrolling: touch; to get the momentum. But then if you swipe anywhere in the app outside the scroll-able div it locks all scrolling until you don't touch the screen for about a second.
Here is an example with -webkit-overflow-scrolling: touch;
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style rel="stylesheet">
body {
position: fixed;
}
.wrapper {
overflow-y: scroll;
height: 300px;
border: 2px solid red;
font-size: 120px;
-webkit-overflow-scrolling: touch; /* momentum scrolling */
}
</style>
</head>
<body>
<div class="wrapper">Scroll Me! Scroll Me!</div>
</body>
</html>
And without for comparison
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style rel="stylesheet">
body {
position: fixed;
}
.wrapper {
overflow-y: scroll;
height: 300px;
border: 2px solid red;
font-size: 120px;
}
</style>
</head>
<body>
<div class="wrapper">Scroll Me! Scroll Me!</div>
</body>
</html>
Is there a way to get both momentum based scrolling in the div and not have it freeze the scrolling if you swipe on the body? I do not need the body to scroll at all, it is fixes at the same height and width as the screen.
css css3 web-applications scroll mobile-safari
css css3 web-applications scroll mobile-safari
asked Jan 3 at 16:04
KennyKenny
12
asked Jan 3 at 16:04
KennyKenny
12
asked Jan 3 at 16:04
KennyKenny
12
asked Jan 3 at 16:04
KennyKenny
12
asked Jan 3 at 16:04
KennyKenny
12
12
add a comment |
add a comment |
0
active
oldest
votes
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025867%2fhow-to-prevent-momentum-scrolling-from-freezing-the-scrolling-of-a-scrollable-di%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025867%2fhow-to-prevent-momentum-scrolling-from-freezing-the-scrolling-of-a-scrollable-di%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
