iScroll问题与二维(水平+垂直)滚动，可滚动是相关的问题

问题简介

我有一段有效的二维滚动代码。这样滚动工作正常。滚动可以在任何方向上完成(不像仅限于水平或仅在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。什么时候不出现？我检查了经过验证的 HTML 如 http://jsfiddle.net/sandeepan_nits/pAhjU/12/。
有人请创建一个标记iscroll或iscroll3，以便我可以重新标记我的问题。

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

我认为 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});

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

首先，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
});

这影响不大，但我仍然这么说。

我将继续研究这个问题，如果我发现任何新的东西，我会更新我的答案。

我知道

你想使用 iscorll 解决这个问题，但想和你分享这个，我使用它得到了很好的结果：http://jscrollpane.kelvinluck.com/#usage

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

相关内容

最新更新

热门标签：