javascript 二维（水平 + 垂直）滚动的 iscroll 问题，可滚动是相关问题吗？

Question

提问by Sandeepan Nath

Problem in brief

问题简述

I have got a piece of working two dimensional scrolling code. Scrolling as such is working fine. Scrolling can be done in any direction (not like restricted to only horizontal or only vertical at a ti,e) but there are two problems -

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

Scrolling beyond the visible area towards top and left, does not bounce back the scrollable area.
Scrolling to right and bottom bounces back.

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

Problem demo - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Note -Test in webkit browsers only (Google chrome and Safari).

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

Solution I am looking for

我正在寻找的解决方案

Either, point out what is wrong in my code.
Or share any properly implemented working demo of both ways scroll (horizontal + vertical) using the same version of iscroll, so that I can follow the same. I am using - version 3.7.1, preferable, or using iscroll version 4, fine as well.
Or any pointers, of course, would be appreciated.

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

Problem Description

问题描述

Please check working code here - http://jsfiddle.net/sandeepan_nits/pAhjU/6/

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

Note -

笔记 -

Test in webkit browsers only (Google chrome and Safari).
I have knowingly put everything inside the HTML section in the jsfiddle, because if I separate things completely, the scrolling does not work, and I am not sure where exactly it stops working. Thanks if you can point out.

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

Code

代码

Here is the 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>

Note -I know there is invalid html there - <div id=scroller1>is inside <b></b>and I am not sure why if I remove the <b></b>tags, horizontal scrolling does not work anymore - check here.

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

Here is the js -

这是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);

I guess the reason is that the scrollable div is by default rendered at the bottom-right corner of the scrollable area. But I am not sure about the proper way to configure those things - how to set where to render the scrollable div inside the scollable area. So far I did not find any working demo of both ways scrolling - horizontal + vertical scrolling.

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

I checked out the documentation of iscrolland many working demos, but did not find any demo where scrolling can be done both ways - horizontally as well as vertically. I checked the "Accepted options are:" section under "Syntax" section in http://cubiq.org/iscrollbut none of those params seem to be what I am exactly looking for.

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

Other things

其他事情

Also, one more thing, I am not able to view the area covered by dom elements in chrome browser, while I inspect the given scroll demo. By viewing the area I mean moving the mouse over the dom inspector panel highlights the dom in the browser view. When does it not appear? I checked with validated HTML as in http://jsfiddle.net/sandeepan_nits/pAhjU/12/.
Somebody please create a tag iscrollor iscroll3so that I can retag my question.

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

Update
I just want to have normal two dimensional scrolling with the scroll area being properly inside the visible screen and there should be bounce back on taking outside the screen. Right now there is no bounce back (in my jsfiddle) on scrolling towards top and left, outside screen. Bounce back happens on scrolling to right and bottom. I just want the scrolling area to be well placed inside the screen. I guess bounce back will automatically get fixed then.

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

Answer 1

采纳答案by ChristopheCVB

I think the last version (4.1.8)on the github repo will fix your problem ;) I'm using it on some projects and it is now optimized for desktop browser ;)

我认为github 存储库上的最新版本 (4.1.8)将解决您的问题；) 我在一些项目中使用它，现在它已针对桌面浏览器进行了优化；)

Edit

编辑

From the documentation :

从文档：

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.

By default, when creating a new iScroll('idOfElement') the scroll is vertical and horizontal. It can be disabled with these parameters. Dual Scroll is totally possible as this videoshows it.

默认情况下，在创建新的 iScroll('idOfElement') 时，滚动是垂直和水平的。可以使用这些参数禁用它。如本视频所示，双滚动完全可能。

So, to force dual Scroll :

因此，要强制使用双 Scroll ：

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

Answer 2

回答by Pheonix

This is not a complete solution, but this might help you.

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

First of all, The HTML code was not properly nested, and so you were needed to put the <div>inside the <b>. I fixed up the HTML a bit and its working without the <b>

首先，的HTML代码没有被正确地嵌套，所以你把需要有<div>内部的<b>。我稍微修正了 HTML，它的工作没有<b>

http://jsfiddle.net/Aexhz/

And with properly nested HTML and correct settings, This worked even after dividing the HTML/JS/CSS

并使用正确嵌套的 HTML 和正确的设置，即使在划分 HTML/JS/CSS 后也能正常工作

For me, it does show some Horizontal as well as Vertical Scrolling, but i don't know if that's how you want it to be. i Edited the Class initialization line as well

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

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

TO

到

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

This doesn't affects much but i still put that.

这没有太大影响，但我仍然这么说。

I will continue looking into this and update my answer if i find anything new.

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

Answer 3

回答by catalint

I know you want to fix this using iscorll but wanted to share this with you, i had great results using it: http://jscrollpane.kelvinluck.com/#usage

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

It is highly customizable with css, a demo here with vertical and horizontal scroll: http://jscrollpane.kelvinluck.com/basic.html

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

javascript 二维（水平 + 垂直）滚动的 iscroll 问题，可滚动是相关问题吗？

提问by Sandeepan Nath

采纳答案by ChristopheCVB

回答by Pheonix

回答by catalint

相关推荐

最近更新

标签

javascript 二维（水平 + 垂直）滚动的 iscroll 问题，可滚动是相关问题吗？

提问by Sandeepan Nath

采纳答案by ChristopheCVB

回答by Pheonix

回答by catalint

相关推荐

javascript 数组的快速分组

javascript 以编程方式打开 Chrome 插件的 options.html 页面？

javascript .innerHTML 与 createElement() | setAttribute() 与 Direct*

javascript 你如何制作一个事件监听器来检测布尔变量是否为真？

相关推荐

最近更新

标签