社区首页 >问答首页 >二维(水平+垂直)滚动问题，可滚动问题是相关问题吗？

问二维(水平+垂直)滚动问题，可滚动问题是相关问题吗？
EN

Stack Overflow用户

提问于 2011-07-25 03:23:34

回答 3查看 12.5K关注 0票数 2

简略的问题

我有一个工作的二维滚动代码。这样的滚动很好。滚动可以在任何方向进行(不像仅限于水平滚动或仅在ti，e处垂直滚动)，但有两个问题-

滚动超出可见区域向上和左，不反弹回滚动区域。
滚动向右和底部反弹回来。

问题演示- nits/pAhjU/6/

注意-仅在webkit浏览器中进行测试(Google和Safari)。

解决方案我正在寻找

或者，指出我的代码中有什么问题。
或者共享使用相同版本的iscroll正确实现的两种方式的滚动(水平+垂直)演示，这样我就可以遵循相同的方法。我使用的是- 3.7.1版本，更好，或者使用iscroll版本4，也可以。
或者任何指点，当然，都会被感激。

问题描述

请检查这里的工作代码- nits/pAhjU/6/

注-

测试仅在webkit浏览器(谷歌铬和Safari)。
我在知情的情况下将HTML部分中的所有内容都放在了jsfiddle中，因为如果我完全分离东西，滚动就不起作用，而且我也不知道它到底在哪里停止工作。如果你能指出的话，谢谢。

码

这是HTML -

<div class="header">
    <div class='left_link'></div>Demo</div>
    <div id="main_content" class="main_content">

    <b><div id=scroller1><br/> 
    <div class='center_data'>Scrollable area</div>
    <div class='center_data'>hello world!</div>
    <br/> 
    </div></b>

</div>

备注-我知道那里有无效的html - <div id=scroller1>在<b></b>中，我不知道为什么如果我删除<b></b>标签，水平滚动不再工作- 检查这里。

这是js -

    var myScroll;
    var a = 0;
    function loaded() {
        //setHeight();  // Set the wrapper height. Not strictly needed, see setHeight() function below.

        // Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
        myScroll = new iScroll('scroller1', {desktopCompatibility:true});
        //myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});

    }


    // Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
    // If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    // Load iScroll when DOM content is ready.
    document.addEventListener('DOMContentLoaded', loaded, false);

我想原因是滚动div默认呈现在可滚动区域的右下角。但是，我不确定配置这些内容的正确方法--如何设置在可滚动区域内呈现可滚动div的位置。到目前为止，我没有发现任何工作演示的两种方式滚动-水平+垂直滚动。

我检查了等深线文献和许多工作演示，但是没有找到任何可以同时进行滚动的演示--水平的和垂直的。我在http://cubiq.org/iscroll中检查了“可接受的选项是：”在“语法”部分下的部分，但是这些参数似乎都不是我所要寻找的。

其他事情

另外，在查看给定的滚动演示时，我无法在chrome浏览器中查看dom元素覆盖的区域。通过查看该区域，我的意思是将鼠标移动到dom检查器面板上，突出显示浏览器视图中的dom。它什么时候不出现？我检查了验证过的HTML，就像在nits/pAhjU/12/中一样。
有人请创建一个标签iscroll或iscroll3，以便我可以继续我的问题。

更新

我只是想有正常的二维滚动与滚动区正确地在可见屏幕内，应该有反弹，采取外面的屏幕。现在，没有反弹(在我的小提琴)滚动向上和左，外面的屏幕。反弹发生在向右和底部滚动。我只想把滚动区域很好地放置在屏幕内。我想反弹会自动修复。

scroll

mobile-website

iscroll4

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-07-29 07:13:51

我认为github上的最后版本(4.1.8)会解决您的问题;)我正在一些项目中使用它，它现在已经为桌面浏览器进行了优化;)

编辑

从文件中：

hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
vScroll, same as above for vertical scroll.

默认情况下，当创建一个新的iScroll('idOfElement')时，滚动框是垂直的和水平的。可以使用这些参数禁用它。正如这段视频所展示的那样，双涡旋是完全可能的。

因此，要强制使用双涡旋：

var myScroller = new iScroll('idOfElement', {vScroll:true, hScroll:true});

票数 2

Stack Overflow用户

发布于 2011-07-27 08:27:53

这不是一个完整的解决方案，但这可能对你有帮助。

首先，HTML代码没有正确嵌套，因此需要将<div>放在<b>中。我在没有<b>的情况下修复了HTML并使其正常工作。

http://jsfiddle.net/Aexhz/

在正确嵌套HTML和正确设置的情况下，即使在对HTML/JS/CSS进行分割之后，这也是可行的。

对我来说，它确实显示了一些水平和垂直滚动，但我不知道这是否是你想要的。我还编辑了类初始化行

    myScroll = new iScroll('scroller1', {desktopCompatibility:true});

至

myScroll = new iScroll('scroller1', {
    snap: true,
    momentum: false,
    hScrollbar: false,
    vScrollbar: false,
    desktopCompatibility: true
});