移动方向（横向）滚动条 HTML5/响应式

Posted 2023-03-14

【中文标题】移动方向（横向）滚动条 HTML5/响应式

【英文标题】：Mobile orientation (landscape) scroll bar HTML5/Responsive

【发布时间】：2013-11-22 10:28:06

【问题描述】：

我一直在构建一个响应式网站，但遇到了 横向 移动设备（或更准确地说，特定指定分辨率（手持设备、屏幕和（最小宽度：480 像素））的问题)) 滚动条只会向下滚动到可滚动容器中的内容的一半。

如果我尝试进一步滚动，它会跳回到中间点并且不会这样做。

这是我的 CSS：

.Container
margin: 3% 0 0 10%;
width: 80%; 

.Content
max-height: 80%;
height: 80%;
overflow-y: scroll; 

这里是html：

<div class="Container" style="display: none;">
    <div class="Header">
        <h5>Help</h5>            
    </div>
    <div class="Content">
        <div class="jqContentdiv">
            <p>Lorem ipsum donsequat urna (i've removed the rest of the content to keep this tidy)</p>
        </div>
        <div class="userActions">
            <a href="#"><p>Close</p></a>                                                     
        </div>
    </div>    
</div>

jqContentdiv 只是一个向左浮动的容器。

可能需要注意的是移动纵向很好，但我注意到如果你在纵向滚动到底部然后切换到横向，滚动条会转到中间点并且会移动没有进一步的。我假设这是以某种方式联系在一起的。

你们中有人遇到过这种情况吗？对此的任何帮助将不胜感激。

【参考方案1】：

您是否尝试过将 iScroll 用于此类行为。

它易于实施，主要用于移动网站。您可以从以下网址找到链接。

http://cubiq.org/iscroll-4

这也将帮助您顺利定位。

【讨论】：

我尽量避免使用插件 Bhavesh。如果它到了我需要添加它的地步，那么我将再看看 iScroll。

然后你需要编写 eventListener 来调整你改变 div 宽度和高度的窗口的大小

检查此链接 ===== ***.com/questions/12643314/…

【参考方案2】：

我决定走 JQuery 移动路线。

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js" type="text/javascript"></script>

这些内含物，尤其是 css 为我解决了我的问题。将 Jquery mobile 添加到现有项目还可以全面添加移动样式。因为我已经设置了这个样式，所以我不需要它，所以我用 jquery 添加了 data-role="none"：

$(document).on('pagebeforecreate', function (e) 
    $("p, input, select, h1, h2, h3, a, span, label, textarea", e.target).attr("data-role", "none");
);

我们不需要样式的所有元素。所有字体和滚动看起来都好多了，我可以选择处理方向变化，这将派上用场。

感谢您的回复 Bhavesh。您的 eventlistener 建议使我改变了方向，这使我决定使用 JQuery 移动解决方案。