Horizontal scrolling on iOS without vertical bounce or superfast inertia

Question

Horizontal scrolling on iOS without vertical bounce or superfast inertia

I am working on a horizontal scroll website and am in two dependent iOS scroll problems. The first problem is that my horizontal scroll area bounces vertically (or rubber bands) in a way that is very annoying. Secondly, the inertial scroll css property of -webkit-overflow-scrolling: touch scrolls twice as fast as regular inertial scroll on iOS, and this extra speed causes rendering problems. I can solve any question myself, but each workaround creates a different problem.

Is there a way to get inertial scrolling in the horizontal direction and also prevent vertical drag?

First, my markup form is simplified:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <link rel="stylesheet" type="text/css" href="style.css" >
    </head>
    <body>
        <div id="wide-content"></div>
    </body>
</html>

CSS Option 1: Wide body, Unwanted vertical drag and drop

html, body {
    width: 10000px;
    height: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    position: absolute;
}

#wide-content {
    width: 100%;
    height: 100%;
}

Here I set my body and html element as wide as my content. Scrolling works naturally. But if the user drags the content up or down, the entire scroll area moves. Vertical movement can trigger simultaneously with any horizontal scrolling that seems very distracting. The image below shows how the page appears when someone pulls in the upper left corner.

CSS Option 2: Narrow body with overflow: scroll, Intermediate scroll too fast

html, body {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    position: absolute;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

#wide-content {
    width: 100000px;
    height: 100%;
    display: block;
}