Реализация мобильной прокрутки на проекте asp.net mvc

Я пытаюсь диагностировать проблему, которая возникает при прокрутке на мобильных устройствах. Я не знаю, где искать, но я думаю, что это сценарии/css, которые я использую в своем проекте. Проблема, которая происходит, заключается в том, что на мобильных устройствах прокрутка действует так же, как на рабочем столе. Я не понимаю, что «слайды» при прокрутке вверх или вниз.Реализация мобильной прокрутки на проекте asp.net mvc

Мой пакет конфигурации

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.

источник

2014-12-22 Zac

Что вы хотите сказать, что у вас нет доступа к этим слайдам? Возможно, скриншоты были бы полезны. – mason

Да, при прокрутке на iPod (или на любом мобильном устройстве) изображение не скользит. По умолчанию в приложениях iOS у вас есть хорошая функция «салфетки». Скорость вашего салфетки несет импульс, и вы видите, что вещи скользят по экрану. В музыкальном приложении в iOS, когда вы прокручиваете вверх или вниз, ваш свиток прокрутки - вот этот эффект отсутствует здесь – Zac

Так что происходит, когда вы пытаетесь прокрутить прямо сейчас? У него нет никакого импульса? Кстати, то, что вы описали, обычно называют «импульсной прокруткой» – mason

Проблема заключалась в том, что этот стиль был на моем html и теле. Устранение этой проблемы устраняет все проблемы.

html, body {overflow-x:hidden;}

источник

2014-12-29 06:43:13 Zac

От CSS Tricks "Momentum Scrolling on iOS Overflow Elements"

веб-страниц прошивки по умолчанию имеет «импульс» прокрутку стиля, где движение пальца отправляет веб-страницу прокрутку и она продолжает идти , пока в конце концов, замедление и остановок, как если бы трение замедляется это вниз. Как если бы вы нажимали хоккейную шайбу на лед или что-то. Вы могли бы подумать, что любой элемент с прокруткой имел бы такое же поведение, как и в случае с , но это не так. Вы можете добавить его обратно с специальным предложением .

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

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

Много комментариев по ссылке выше, также может быть полезным.

источник

2014-12-22 19:49:26 mason

Реализация мобильной прокрутки на проекте asp.net mvc

ответ

Смежные вопросы