窗口调整大小时的重置功能

Question

我在我的网站上使用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'})
    });
});

- Jeffrey van Rossum

---

你为什么要从window.width中减去240和65？ - Purag

因为底部的高度为65像素，而菜单的宽度为240像素。 - Jeffrey van Rossum

我明白了。为了让它看起来更好，尝试将新的宽度/高度放入变量中，并在slimScroll函数中设置这些变量。（我还注意到你在$(window)>height()周围有括号 - 你不需要那个）。 - Purag

我不明白的是，为什么要这样做 height: $('#content_wrapper').css({'height':(($(window).height())-65)+'px'})。实际上，$()..表达式的返回值是一个jQuery对象而不是一个大小（宽度也是如此）。顺便说一下，其他的看起来都很好。 - Gergely Fehérvári

Answer 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);
    });
  });

- Alan Vercauteren

Answer 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/上找到了这个内容，对于我来说非常有用。

- Phuong Vu

Answer 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);
});

- Syed

Answer 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'
    });
});

- Gergely Fehérvári