Question

我正在jquery mobile中创建一个带有一些数据的对话框。滚动条从标题而不仅仅是内容开始。是否可以仅为内容而不是标题启动滚动条。这是我的代码： dialog.html

<body >


<div id="Dialog" style="width: 400px; min-height: 200px; max-height: 250px; overflow: auto;"> 

    <div data-role="header" class="mHeader" data-close-btn="right">
        <div style="overflow: hidden;">
            <h3 style="display: inline-block; width: 130px; text-shadow: 0 1px 0 #fff; font-size: 16px; color: #FF0000; float: left; margin-left: 48px; margin-top: 9px;">Names</h3>
            <div style="display: inline-block; width: 130px; float: left; margin-left: 250px; margin-top: -35px; font-size: 12px; text-decoration: none; color: #5089B5; font-weight: bold; cursor: pointer;"> Reports</div>
        </div>
    </div>

    <div data-role="content" style="padding: 2px 15px 15px 15px;">
        <div  style="width: 300px; padding-left: 27px; ">
            <ul data-role="listview" data-inset="true">
                <li data-role="list-divider"  data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">
                <div  style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222"> ABC</div>

                </li>
              <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222; background: #fafafa;">ABC

              </li>
            <li data-role="list-divider"  data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC

              </li>
              <li data-role="list-divider"  data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC

              </li>     
            </ul>    
            <ul data-role="listview" data-inset="true">
                <li data-role="list-divider"  data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">
                <div  style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222"> ABC</div>

                </li>
              <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222; background: #fafafa;">ABC

              </li>
            <li data-role="list-divider"  data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC

              </li>
              <li data-role="list-divider"  data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC

              </li>     
            </ul>    
            <ul data-role="listview" data-inset="true">
                <li data-role="list-divider"  data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">
                <div  style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222"> ABC</div>

                </li>
              <li data-role="list-divider" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" style="font-size: 14px; padding: 8px 6px 6px 12px; color: #222222; background: #fafafa;">ABC

              </li>
            <li data-role="list-divider"  data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC

              </li>
              <li data-role="list-divider"  data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c">ABC

              </li>     
            </ul>    



        </div>
    </div>

</div>

</body>

Answer 1

只需将max-height和overflow放在内容div而不是对话框div：

<div id="Dialog" style="width: 400px; ">
    <div data-role="header" class="mHeader" data-close-btn="right">
        <div style="overflow: hidden;">
             <h3 style="display: inline-block; width: 130px; text-shadow: 0 1px 0 #fff; font-size: 16px; color: #FF0000; float: left; margin-left: 48px; margin-top: 9px;">Names</h3>

            <div style="display: inline-block; width: 130px; float: left; margin-left: 250px; margin-top: -35px; font-size: 12px; text-decoration: none; color: #5089B5; font-weight: bold; cursor: pointer;">Reports</div>
        </div>
    </div>
    <div data-role="content" style="padding: 2px 15px 15px 15px; min-height: 150px; max-height: 200px; overflow: auto;">
        <div style="width: 300px; padding-left: 27px; ">
            <ul data-role="listview" data-inset="true">
               ...

对于移动设备，您还需要添加-webkit-overflow-scrolling：touch;以及溢出：自动。

由于您的代码不在上下文中，因此很难知道您的具体情况。您可能需要使用javascript来计算所需的高度......

更新：Adrien Be让我摆脱了懒惰：）

你也应该避免内联CSS，因为它很难维护，你经常在很多地方重复相同的规则而不是仅仅应用一个类。相反，在CSS文件中设置类并将这些类应用于元素。

例如，而不是：

<div data-role="content" style="padding: 2px 15px 15px 15px; min-height: 150px; max-height: 200px; overflow: auto;">

尝试

<div data-role="content" class="scrollableContent">

然后在CSS文件中创建一个scrollableContent类：

.scrollableContent {
    padding: 2px 15px 15px 15px; 
    min-height: 150px;
    max-height: 200px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

我需要滚动条在内容中开始（不在标题中） - Jquery Mobile

1 个答案: