发表新帖
发表新帖

How to disable inertial scrolling on body for iOS browsers?

前端 未结
关注
5 672
盖世英雄少女心
盖世英雄少女心 2020-12-09 13:13

I need to disable the inertial scrolling on the body element for iPad, but keep the ability to scroll the page without the inertia.

I have been look

相关标签:
5条回答
  • 孤独总比滥情好
    2020-12-09 13:21

    Add this to the body element's CSS:

    -webkit-overflow-scrolling: auto;

    The default for -webkit-overflow-scrolling is touch. That tells iOS devices to use "inertial" scrolling. The docs: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

    @meuwka answer achieves your goal, but in a roundabout way—it works because div elements have -webkit-overflow-scrolling: auto; as their default.

    0 讨论(0)
  • 日久生厌
    2020-12-09 13:23

    I've used inobounce which can be found here

    You'll notice you have to specify a height property and overflow: auto to the element you'd like scrollable, including -webkit-overflow-scrolling: touch;. The docs do a good job at explaining.

    0 讨论(0)
  • -上瘾入骨i
    2020-12-09 13:28

    You can use div with overflow property, it kill smooth iOS scroll

    <body>
  <div class="scroll">
    long long text...
  <div>
</body>

    Css

    html,
body {
 height: 100%;
 margin: 0;
 overflow: hidden;
}
.scroll {
 overflow: auto;
 height: 100%;
}

    http://jsbin.com/palixi/edit

    0 讨论(0)
  • 北恋
    2020-12-09 13:42

    Just setting the -webkit-overflow-scrolling rule to html and body doesn't work for me.

    I had to set webView.scrollView.bounces = false in the viewDidLoad func in swift.Try it and let us know if it solves your problem.

    0 讨论(0)
  • 刺人心
    2020-12-09 13:43

    iOS13 changes :

    Accelerated Scrolling on iOS and iPadOS

    Accelerated scrolling the main frame has always been available with WebKit on iOS. In addition, developers could use a CSS property called -webkit-overflow-scrolling to opt-in to fast scrolling for overflow scroll. None of that is necessary with iPadOS and iOS 13. Subframes are no longer extended to the size of their contents and are now scrollable, and overflow: scroll; and iframe always get accelerated scrolling. Fast scrolling emulation libraries are no longer needed and -webkit-overflow-scrolling: touch; is a no-op on iPad. On iPhone, it still has the side-effect of creating a CSS stacking context on scrollable elements. Developers will want to test their content to see how hardware accelerated scrolling everywhere affects it and remove unnecessary workarounds.

    0 讨论(0)
 看不清?
提交回复
热议问题