Question

我正在尝试实现窗口调整大小事件侦听器，以便我使用的jScroll jQuery插件不会在较小的屏幕上触发，其中某些项目的滚动会导致问题。

通过整理我在这里阅读的各种内容，这就是我所提出的：

<script>    
    $(window).resize(function() {
        windowWidth = $(this).width();
        if (.windowWidth() > 602) {
            $(".sectionTitle").jScroll({speed : "slow",top : 50});
});

</script>

How to disable JavaScript in media query是我的主要帮助来源，但仍无法让它发挥作用。任何帮助将不胜感激。

RE评论：这就是我在控制台中得到的结果：

Uncaught SyntaxError：意外的令牌。（指数）：113 2 未捕获的SyntaxError：意外的输入结束（索引）：1 获取http://ghost-mirror.org/notify_act.php net :: ERR_NAME_NOT_RESOLVED jquery.js：5

当我不在调整大小函数中包装jscroll代码时，.sectionTitle跟随用户在窗口中滚动，就像固定元素一样，直到它到达容器的末尾。

我更新了像entiendo所说的代码：

<script>    
$(window).resize(function() {
    var windowWidth = $(this).width();
    if(windowWidth > 602) {
        $(".sectionTitle").jScroll({speed : "slow",top : 50});
        }
  });
</script>

如果我可以让窗口宽度超过602px默认运行该插件，并且在低于602的窗口默认禁用该插件，我将非常感激。（目前它仅在我调整窗口大小时运行，所以如果我加载页面但不改变大小，则脚本不会运行）。

Answer 1

所以，这是一个建议：

HTML：

 <div id="container">
     <div class="scroll">
     <h3>Page 1</h3>
     <p>Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin
     This is the content of page 1 in the jScroll example. Scroll to the bottom of this box to load the next set of content.

     This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.

     With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.

     jScroll is open-source and can be downloaded from my GitHub repository at github.com/pklauzinski/jscroll. </p>
     <a href="example-page2.html">next page</a>
     </div>
 </div>

jQuery的：

$(document).ready(function(){
var origElement = $('.scroll').clone(); //we're cloning the original element and will use that to replace the content of the div "container" whenever the window size is less than 602px

if($(window).width() > 602){
    $('.scroll').jscroll();
    }

$(window).resize(function(){
    if($(window).width() < 602){
        alert($(window).width());
       $('.scroll').remove();
       $('#container').html(origElement);
       }
    else{
         $('.scroll').jscroll();
        }
    });
});

这是一个小提琴：http://jsfiddle.net/6YXFu/3/

如何在窗口大小调整上禁用jQuery插件

1 个答案: