窗口调整大小的重置功能答案

【问题标题】：Reset function on window resize窗口调整大小的重置功能
【发布时间】：2015-09-09 21:29:23
【问题描述】：

我正在为我的网站使用 SlimScroll 插件。

我想在调整窗口大小时重置/重启slimscroll功能，因为高度和宽度应该根据#content_wrapper div的高度和宽度来改变。

我尝试了多种方法，但似乎没有任何效果。在我当前的代码下方。有谁知道我如何做到这一点？

$('#content_wrapper').slimScroll({
    width: $('#content_wrapper').css({'width':(($(window).width())-240)+'px'}),
    height: $('#content_wrapper').css({'height':(($(window).height())-65)+'px'})
});

// scrollbar onresize resetten
$(window).resize(function(){    
    $('#content_wrapper').slimScroll({
        width: $('#content_wrapper').css({'width':(($(window).width())-240)+'px'}),
        height: $('#content_wrapper').css({'height':(($(window).height())-65)+'px'})
    });
});

【问题讨论】：

为什么要从 window.width 中减去 240 和 65？
因为 65px 是页脚的高度，240px 是菜单的宽度。
我明白了。为了让它看起来更好，尝试将新的宽度/高度放入变量中，并在 slimScroll 函数中设置变量。（我还注意到$(window)>height() 周围有括号——你不需要那个）。
我不明白，你为什么这样做height: $('#content_wrapper').css({'height':(($(window).height())-65)+'px'})。实际上 $().. 表达式的返回是一个 jQuery 对象而不是一个大小（也有宽度）。顺便说一句，其他看起来不错。

标签： jquery restart

【解决方案1】：

今天刚遇到这个问题，这对我有用：初始化 slimScroll 时，它会添加一个带有“slimScrollDiv”类的 div。您可以更改此 div 的高度并将其设置为与您的包装 div 相同...

  $(document).ready(function(){
    $('#scrollDiv').slimScroll({
      height: 'auto'
    });

    $(window).resize(function(){
      var h=$(window).height()-250;
      $('#scrollDiv').height(h);
      $('.slimScrollDiv').height(h);
    });
  });

【讨论】：

【解决方案2】：

对于版本 0.5.0，替换以下内容：

// set up initial height
getBarHeight();

与：

$(window).resize(function() {
     getBarHeight();
     showBar();
});

我在 http://dt.infolearn.com.gr/2012/03/jquery-slimscroll-refresh-on-window-resize/ 上找到了这个，它对我有用。

【讨论】：

【解决方案3】：

我知道很久以前就有人问过这个问题，但我遇到了同样的问题并找到了一些解决方法，这是我针对您遇到的问题的解决方案。

// Resetting slim scroll
function applySlimScroll(){
    $('#content_wrapper').slimScroll({
        width: $('#content_wrapper').css({'width':(($(window).width())-240)+'px'}),
        height: $('#content_wrapper').css({'height':(($(window).height())-65)+'px'})
    });
}

// Resetting slim scroll
function resetSlimScrollLessonSlide(){
    $('.slimScrollDiv #content_wrapper').unwrap();
    $('.slimScrollBar, .slimScrollRail').remove();
}

// Let the resize event interval be larger, so resized in 500ms!
function resizedw(){
    resetSlimScrollLessonSlide();
    applySlimScroll()
}

var doit;
$(window).resize(function () {
    clearTimeout(doit);
    doit = setTimeout(resizedw, 500);
});

【讨论】：

【解决方案4】：

也许：

$('#content_wrapper').slimScroll({
    width: (($(window).width())-240)+'px',
    height: (($(window).height())-65)+'px'
});

// scrollbar onresize resetten
$(window).resize(function(){    
    $('#content_wrapper').slimScroll({
        width: (($(window).width())-240)+'px',
        height: (($(window).height())-65)+'px'
    });
});

【讨论】：