Question

我一直在构建一个响应式网站，并且遇到了风景移动设备的问题（或更确切地说，特定的指定分辨率（手持设备，屏幕和（最小宽度：480px））））滚动条只能在可滚动容器中向内滚动一半。

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

这是我的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只是一个向左浮动的容器。

重要的是要注意移动人像很好，但我注意到如果你以纵向滚动到底部，然后切换到横向，滚动条会转到中途点，然后会转到没有进一步的。我假设某种方式有联系。

你们有没有遇到过这个？对此的任何帮助将不胜感激。

Answer 1

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

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

http://cubiq.org/iscroll-4

这将有助于您顺利进行定位。

Answer 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移动解决方案。

移动方向（风景）滚动条HTML5 /响应

2 个答案: