2

问题简述

我有一段工作二维滚动代码。这样滚动工作正常。可以在任何方向上滚动（不像仅限于水平或仅在 ti,e 处垂直）但有两个问题 -

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

问题演示 - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
注意 -仅在 webkit 浏览器中测试（Google chrome 和 Safari）。

我正在寻找的解决方案

  • 要么，指出我的代码有什么问题。
  • 或者使用相同版本的 iscroll 共享任何正确实现的双向滚动（水平+垂直）的工作演示，以便我可以遵循相同的操作。我正在使用 - 版本 3.7.1，更可取，或者使用 iscroll 版本 4，也很好。
  • 或者任何指针，当然，将不胜感激。

问题描述

请在此处检查工作代码 - http://jsfiddle.net/sandeepan_nits/pAhjU/6/

笔记 -

  • 仅在 webkit 浏览器中测试（Google chrome 和 Safari）。
  • 我故意将所有内容都放在了 jsfiddle 的 HTML 部分中，因为如果我完全分开，滚动不起作用，而且我不确定它到底在哪里停止工作。谢谢，如果你能指出。

代码

这是 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 的位置。到目前为止，我没有找到任何两种滚动方式的工作演示 - 水平 + 垂直滚动。

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

其他事情

  • 另外，还有一件事，当我检查给定的滚动演示时，我无法在 chrome 浏览器中查看 dom 元素覆盖的区域。通过查看该区域，我的意思是将鼠标移到 dom 检查器面板上，在浏览器视图中突出显示 dom。什么时候不出现？我在http://jsfiddle.net/sandeepan_nits/pAhjU/12/中检查了经过验证的 HTML 。

  • 有人请创建一个标签iscroll，iscroll3以便我可以重新标记我的问题。

更新
我只想进行正常的二维滚动，滚动区域正确地位于可见屏幕内，并且应该在屏幕外反弹。现在，在屏幕外向上和向左滚动时没有反弹（在我的 jsfiddle 中）。反弹发生在滚动到右侧和底部时。我只想将滚动区域很好地放置在屏幕内。我猜反弹会自动得到修复。

4

3 回答 3

2

我认为 github repo 上的最后一个版本（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') 时，滚动是垂直和水平的。可以使用这些参数禁用它。正如此视频所示，双滚动是完全可能的。

所以，强制双 Scroll ：

var myScroller = new iScroll('idOfElement', {vScroll:true, hScroll:true});
于 2011-07-29T15:13:51.157 回答
1

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

首先，HTML 代码没有正确嵌套，因此需要<div>将<b>. 我稍微修复了 HTML 并且它在没有<b>

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
});

这不会有太大影响，但我还是这么说的。

如果我发现任何新内容，我将继续调查并更新我的答案。

于 2011-07-27T16:27:53.947 回答
0

我知道您想使用 iscorll 解决此问题，但想与您分享，我使用它取得了很好的效果：http: //jscrollpane.kelvinluck.com/#usage

它可以通过 css 高度定制，这里有一个带有垂直和水平滚动的演示：http: //jscrollpane.kelvinluck.com/basic.html

于 2011-08-03T09:06:11.287 回答