Question

如标题中所述，我在我的代码中有一个div，我无法在Android 4.2上的默认浏览器上滚动（可能更低）。

这是HTML：

<div class="slider">
    <div class="slider-list">
        <div class="slide active-slide">
            <section class="content auth">
                <h1>Vérification de l'identité</h1>
                <label for="authentication-0">Veuillez saisir votre date de naissance pour vous authentifier (JJ/MM/AAAA)</label>
                <input placeholder="Champ obligatoire" type="text" id="authentication-0" name="authentication[430]" class="form-control auth-field" required="" data-map="430">
            </section>
            </div>
            <div class="slide">
            <section class="content hide">
                <h2>Bienvenue</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim nisl, fermentum id nunc et, imperdiet blandit nisi. Integer risus sapien, placerat sit amet vestibulum ut, dictum vitae elit. Sed eu sollicitudin nisi. Vestibulum et pulvinar lacus, et ultricies purus. Integer elementum mi erat, id dignissim purus tincidunt at. In placerat tempor mi, viverra maximus purus convallis vitae. Morbi laoreet in arcu id finibus. Suspendisse potenti.</p>
                <h2>Mode opératoire</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim nisl, fermentum id nunc et, imperdiet blandit nisi. Integer risus sapien, placerat sit amet vestibulum ut, dictum vitae elit. Sed eu sollicitudin nisi. Vestibulum et pulvinar lacus, et ultricies purus. Integer elementum mi erat, id dignissim purus tincidunt at. In placerat tempor mi, viverra maximus purus convallis vitae. Morbi laoreet in arcu id finibus. Suspendisse potenti.</p>
                <h2>Votre dossier</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim nisl, fermentum id nunc et, imperdiet blandit nisi. Integer risus sapien, placerat sit amet vestibulum ut, dictum vitae elit. Sed eu sollicitudin nisi. Vestibulum et pulvinar lacus, et ultricies purus. Integer elementum mi erat, id dignissim purus tincidunt at. In placerat tempor mi, viverra maximus purus convallis vitae. Morbi laoreet in arcu id finibus. Suspendisse potenti.</p>
            </section>
        </div>
    </div>
</div>
<div class="content-button">
    <button role="button" class="suivant next">Suivant</button>
    <div style="font-size: 0" class="rs-boutons-recap">
        <button role="button" class="bouton-recommencer">Recommencer</button>
        <button role="button" class="bouton-modifier"><span class="progress"></span><span class="btn-label">Modifier</span></button>
        <button role="button" class="bouton-valider"><span class="progress"></span><span class="btn-label">Valider</span></button>
    </div>
</div>

这是CSS：

* {
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border-style: none;
}

html, body {
    font-size: 16px;
    height: 100%;
    width:100%;
    font-family: 'Tahoma',Arial,sans-serif;
}

.slider{
    height: calc(100% - 220px);
    position:fixed;
    top:70px;
}        

.slider{
    width: 100%;
    overflow: auto;
}

.slider div.slider-list, .slider div.slider-list div.slide{
    height: 100%;
    width: 100%;
}

.slide{
    display:none;
    -webkit-overflow-scrolling: touch;
}

.slide.slider-active{
    display:block !important;
}

.content {
    width: 80%;
    margin: auto;
    height: 100%;
    padding:5% 10% 0 10%;
}

.content-button {
    width: 80%;
    height: 100px;
    margin: 0 10%;
    padding: 0;
    text-align: right;
    position: fixed;
    bottom: 50px;
    z-index:800;
}

我有一个JS脚本，点击.next按钮，淡出＆＃34; .active-slide＆＃34;在下一个＆＃34; .slide＆＃34;在DOM中。

但是，第二张幻灯片上的滚动在Android 4.2上无效（使用默认浏览器 - 使用Chrome按预期工作）。

它适用于Android 4.4 +，iOS和桌面（Chrome，IE9，FF，...）

有没有人知道我错过了什么？

谢谢你们：）

Answer 1

Android 4.3及以下版本不支持

calc（）。

http://caniuse.com/#feat=calc

我有一种感觉.slider没有设置它的高度，这意味着滚动不会触发。

尝试设置静态高度值以测试calc（）是否是罪魁祸首。

DIV无法在Android 4.2

1 个答案: