Question

我正在尝试在移动设备上滚动时诊断出我遇到的问题。我不知道在哪里看，但我认为它可能是我在我的项目中使用的脚本/ 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;
    }
}

我的_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>

是否有任何理由无法正确加载？这是一个非常开箱即用的asp.net mvc项目。

Answer 1

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

默认情况下，iOS上的网页有一个“动量”样式滚动，其中a 轻弹手指发送网页滚动，它继续前进直到最终减速并停止，就像摩擦减慢一样它失败了。就像你要将冰球推到冰上或冰上一样一些东西。您可能认为任何带滚动的元素都会有这种行为也是如此，但事实并非如此。您可以将其添加回来特殊财产。

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

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

上述链接中的大量评论也可能有所帮助。

Answer 2

问题是我的html和body上有这种风格。删除此修复了所有问题。

html, body {overflow-x:hidden;}

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

2 个答案: