在 asp.net mvc 项目上实现移动滚动答案

【问题标题】：Implementing mobile scrolling on asp.net mvc project在 asp.net mvc 项目上实现移动滚动
【发布时间】：2014-12-22 18:02:05
【问题描述】：

我正在尝试诊断在移动设备上滚动时遇到的问题。我不知道在哪里看，但我认为这可能是我在项目中使用的脚本/css。正在发生的问题是，在移动设备上，滚动就像在桌面上一样。当我向上或向下滚动时，我没有看到“滑动”的视图。

我的捆绑配置

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;
    }
}

我的布局

<!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>

是否有任何原因导致它无法正确加载？这是一个新的开箱即用的 asp.net mvc 项目。

【问题讨论】：

看不到滑动视图是什么意思？也许截图会有所帮助。
是的，在 iPod（或任何移动设备）上滚动时，视图不会滑动。默认情况下，在 iOS 应用程序中，您拥有不错的“滑动”功能。滑动的速度带有动量，您会看到东西在屏幕上滑动。在 iOS 的音乐应用中，当您向上或向下滑动时，您的视图会滚动 - 正是这里缺少这种效果
那么当您现在尝试滚动时会发生什么？没有动力吗？顺便说一句，您所说的通常称为“动量滚动”
它没有动力。项目建成时，它做到了。现在，当您浏览此处时，它已经消失了：learnaspnetmvc.azurewebsites.net

标签： jquery css asp.net asp.net-mvc

【解决方案1】：

来自CSS Tricks "Momentum Scrolling on iOS Overflow Elements"

默认情况下，iOS 上的网页具有“动量”样式滚动，其中手指轻弹使网页滚动并继续直到最终减速并停止，好像摩擦正在减速它下来。就像你将冰球推过冰面或某物。您可能认为任何带有滚动功能的元素都会这种行为也是如此，但事实并非如此。您可以使用特殊属性。

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

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

以上链接中的大量 cmets 也可能会有所帮助。

【讨论】：

【解决方案2】：

问题在于我的 html 和 body 上有这种样式。删除它解决了所有问题。

html, body {overflow-x:hidden;}

【讨论】：