Question

我的垂直滚动页面存在问题，我使用（打算）两个嵌套的quickscroll函数。

这就是它应该看起来的样子： enter image description here - 只需删除你脑海中的滚动条。我只是在使用

overflow:scroll

在这里手动检查事物。

由于JS不是我的强项（我对它只有非常基本的知识），我只是得到了一段类似的代码，通过从HTML和CSS中尽可能多地删除它来反向设计它。我留下了裸功能，并根据所需的HTML和CSS以及代码将其插入我自己的页面。我没有使用任何专有的，我包括作者链接，希望我在那里安全（？）

因此，主卷轴是垂直卷轴，在其中一个垂直部分中使用了这个“逆向工程”卷轴。水平快速滚动码。

新的（嵌套的）脚本取消了主要脚本。任何想法如何解决这个问题？

主（垂直滚动）如下：

<script>
$(document).ready(function() {

$('a.panel').click(function () {

    $('a.panel').removeClass('selected');
    $(this).addClass('selected');

            /* I added this to hide the menu during scroll and I'm mighty proud of myself! :) */
            $('.menu').addClass('hide');
    $('.book_arrow').addClass('hide');

    current = $(this);

    $('body').scrollTo($(this).attr('href'), 2600, function(){
        $('.menu').removeClass('hide');
        $('.book_arrow').removeClass('hide');
    });     

    return false;
});



});

</script>

它带有这两个链接文件：

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

冲突的代码有点长：

    <script>
  // initialize scrollable and return the programming API
  var api = $("#scroll").scrollable({
  items: '#tools'

  // use the navigator plugin
  }).navigator().data("scrollable");


  // this callback does the special handling of our "intro page"
  api.onBeforeSeek(function(e, i) {

  // when on the first item: hide the intro
  if (i) {
  $("#intro").fadeOut("slow");

  // dirty hack for IE7-. cannot explain
  if ($.browser.msie && $.browser.version < 8) {
                            $("#intro").hide();
                                }

                                    // otherwise show the intro
                                    } else {
                                $("#intro").fadeIn(1000);
                                    }

                                    // toggle activity for the intro thumbnail
                                    $("#t0").toggleClass("active", i == 0);
                                        });

                                        // a dedicated click event for the intro thumbnail
                                        $("#t0").click(function() {

                                    // seek to the beginning (the hidden first item)
                                    $("#scroll").scrollable().begin();

                                        });

</script>

...它链接到这个文件：

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

在HTML中我放置所有这些块的位置是否重要？孤立地说，两个脚本都在工作。

我已经阅读了一个看似相似的案例here，而且我认为在我的情况下，我也可以处理被占用的变量＆＃39;通过其中一个功能，但我不确定要改变什么以及在哪里。

我非常期待从这个问题中吸取教训！：）

Answer 1

希望它不会导致Stack溢出，我会在我的旅程中添加更多（我的解决方案）。也许它有助于子孙后代跟随我的学习曲线......

我能够让嵌套的快速滚动（我称之为）正常工作。在JS中还是一个新手，我玩了一些我已经得到并修改过的脚本 - 一个垂直工作的脚本 - 并且将（内部）水平滚动的另一个类似的脚本填充到第一个脚本中！好极了！有效。以下是最终脚本的外观：

<script>
$(document).ready(function() {

$('a.panel').click(function () {
    $('.book_arrow').fadeOut();
            ## which prevents the vertical page flying past a lot of nav during scroll down ##

    $('.fluid_centerbox').addClass('hide');
    $('.fluid_centerbox').fadeOut();
            ## which makes the scroll smooth cause what's {display:none;} isn't going to be recalculated           
            and also lets the viewer appreciate the background images during scroll. the 'hide' is 
            instant and the .fadeOut is animated. Don't ask me why it worked best in this order! ##

    current = $(this);

    $('body').scrollTo($(this).attr('href'), 2600, function(){
        $('.book_arrow').fadeIn();
        $('.fluid_centerbox').fadeIn(), 40000;

    });     

    return false;
});

$('a.panell').click(function () {
    current = $(this);
    $('.long_wrap').scrollTo($(this).attr('href'), 2600, function(){
    });     

    return false;
    });
## the panell is not a typo but a way to distinguish both scroll button types ##
});

</script>

当我发布这个时，我发现在内部快速滚动中，有一个空的

function(){});

如果可能的话，也许以后我会试着摆脱它。

一个脚本导致另一个脚本停止工作

1 个答案: