CODEWITHSUNDEEP
jquerycssasp.netasp.net-mvc
reZach
reZach

Reputation: 9429

Implementing mobile scrolling on asp.net mvc project

I am trying to diagnose a problem that I am having when scrolling on mobile devices. I don't know where to look, but I think it may be the scripts / css that I am using in my project. The problem that is happening is that on mobile, scrolling acts as it would on the desktop. I don't get a view that "slides" as I scroll up or down.

My bundle config

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.UseCdn = true;

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new ScriptBundle("~/bundles/amplify").Include(
                    "~/Scripts/amplify.js"));

        bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

        // Set EnableOptimizations to false for debugging. For more information,
        // visit http://go.microsoft.com/fwlink/?LinkId=301862
        BundleTable.EnableOptimizations = true;
    }
}

My _Layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn ASP.NET MVC</title>
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>    
    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
    @Styles.Render("~/Content/bootstrap")    
</head>
<body>
    <!--- --->

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/amplify")
    @RenderSection("scripts", required: false)
</body>
</html>

Would there be any reason why it doesn't load properly? This is a mostly fresh-out-of-the-box asp.net mvc project.

Upvotes: 0

Views: 978

Answers (2)

reZach
reZach

Reputation: 9429

The problem was having this style on my html and body. Removing this fixed all of the problems.

html, body {overflow-x:hidden;}

Upvotes: 0

mason
mason

Reputation: 32693

From CSS Tricks "Momentum Scrolling on iOS Overflow Elements"

Web pages on iOS by default have a "momentum" style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something. You might think that any element with scrolling would have this behavior as well, but it doesn't. You can add it back with a special property.

.module {
  width: 300px;
  height: 200px;

  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

Plenty of comments at the above link may also be helpful.

Upvotes: 1

Related Questions