jQuery Mobile的面板滚动与内容 [英] Jquery Mobile panel scrolls with content

问题描述

使用jQuery Mobile的，我有一个面板div来创建一个导航系统，并设置它的高度是浏览器的100％。如果内容超过了面板的高度，CSS溢出y属性让用户滚动看到隐藏的内容。 pretty的简单吧？

现在，这里是我得到的一些麻烦，而CSS溢出y属性正常工作的iOS设备，Android正在给我一些麻烦。虽然用户可以滚动面板，查看隐藏的内容，实际内容的div（ DIV数据角色=内容/ code>）也滚动。所以，如果我有10项我必须滚动到面板，主要内容股利也将滚动，直到我到达终点。
继承人链接到一个演示
如果你认为这一个Android设备上，你会看到这个问题我说的。我想知道这是Android的，jQuery的，还是其他的问题。我使用的是Android 4.1，JQM 1.3.2和jQuery 1.9.1

CSS

  .UI面板{溢出-Y：滚动; }
 

JS（用于设定面板的高度）

  $（函数（）{
  $（'UI面板。），CSS（{高度：（$（文件）.height（））+'像素'}）;
  $（窗口）.resize（函数（）{
    $（'UI面板。），CSS（{高度：（$（文件）.height（））+'像素'}）;
  }）;
}）;
 

解决方案

包装你的内容的面板内有一个div，并给它一个类，即在。然后设置溢出：隐藏; 的面板 #panel_id 或 .ui-面板。对于内格，设置溢出-Y：滚动;

  

演示

.UI面板{   溢出：隐藏; } 。内 {   溢出-Y：滚动; }

现在来JS的一部分。调整 .inside 高度不得面板。

  $（'。'内）。CSS（{
    高度：（$（文件）.height（））+'像素'
}）;

$（窗口）.resize（函数（）{
    $（'。'内）。的CSS（{
        高度：（$（文件）.height（））+'像素'
    }）;
}）;
 

Using Jquery Mobile, I have a panel div to create a navigation system and set the height of it to be 100% of the browser. If the content exceeds the height of the panel, the css overflow-y property lets the user scroll to see the hidden content. Pretty simple right?

Now here is where I'm getting in to some trouble, while the css overflow-y property works fine on iOS devices, Android is giving me some trouble. While the user is able to scroll the panel to see hidden content, the actual content div (div data-role="content) also scrolls. So if I have 10 items that I have to scroll to in the panel, the main content div will also scroll until I reach the end.
Heres a link to a demo
If you view this on a android device you'll see the issue I'm talking about. What I want to know if this is a problem from Android, Jquery, or something else. I'm using Android 4.1, JQM 1.3.2, and Jquery 1.9.1

CSS

.ui-panel { overflow-y:scroll; }

JS (for setting the height of the panel)

$(function(){
  $('.ui-panel').css({'height':($(document).height())+'px'});
  $(window).resize(function(){
    $('.ui-panel').css({'height':($(document).height())+'px'});
  });
});

解决方案

Wrap your contents inside the panel with a div and give it a class i.e. inside. Then set overflow: hidden; for the panel #panel_id or .ui- panel. For the inner div, set overflow-y: scroll;.

Demo

.ui-panel {
  overflow: hidden;
}

.inside {
  overflow-y: scroll;
}

And now comes JS part. Adjust .inside height not the panel.

$('.inside').css({
    'height': ($(document).height()) + 'px'
});

$(window).resize(function () {
    $('.inside').css({
        'height': ($(document).height()) + 'px'
    });
});

这篇关于jQuery Mobile的面板滚动与内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！