Question

所以我一直在尝试将插件应用于Body Element，由于某种原因它只是不起作用.. 我尝试过的事情：

$(function() {
  $('body, html').slimScroll({
    size: '8px',
    width: '100%',
    height: '100%',
    color: '#ff4800',
    allowPageScroll: true,
    alwaysVisible: true
  });
});

$(function() {
  $('#body').slimScroll({
    size: '8px',
    width: '100%',
    height: '100%',
    color: '#ff4800',
    allowPageScroll: true,
    alwaysVisible: true
  });
});

有谁知道我做错了什么？在此先感谢您的回答

“如果我无法控制身体标签？我将模板嵌入第三方网站？所以身体没有id标签它只有视图来源：avatars.imvu.com/LadyKonstantine”

Answer 1

由于你需要在body上应用slim scroll，你必须使用jQuery的body选择器。代码将是这样的：

    <script type="text/javascript">
      $(function(){
        $("body").slimScroll({
          size: '8px', 
          width: '100%', 
          height: '100%', 
          color: '#ff4800', 
          allowPageScroll: true, 
          alwaysVisible: true     
        });
      });
    </script>

请记住这些

确保已安装jQuery和slimScroll插件。
如果您的身体高度超过100％
如果您想使用$（“＃body”）而不是$（“body”），请不要忘记添加
```
<body id="body">
```

更多详情

点击here！阅读更多关于苗条卷轴的信息。

Answer 2

在我的视图中，将slimScroll直接附加到Body标签不是一个优先解决方案。尝试一下，你会发现slimScroll将你的BODY标签包装在它自己的DIV标签内;当我试图将slimScroll附加到BODY元素时，至少我发现了这种方式。因此，您会发现页面的HTML完全混乱。标签序列为HEAD - slimScrollDiv - BODY。相反，我建议在打开BODY标签后立即在BODY中包含一个包装器DIV，然后将slimScroll附加到此包装器DIV。

Answer 3

SlimScroll仅适用于div元素。为此，请在打开的body标签之后添加一个主包装器。在这种情况下，我会称之为：

在HTML中：

<div id="body"></div>

然后计算视口高度，而不是HTML，文档高度。完成后，将此值传递给slimscroll插件的高度。示例：

在JS中：

var viewportHeight= $(window).height();
$('#body').slimScroll({
    height: viewportHeight+'px',
    color: '#455A64',
    distance: '0',
    allowPageScroll: true, 
    alwaysVisible: true     
});

Answer 4

您还可以使用vh的新CSS值来计算slimscroll的高度。示例：

$('#body').slimScroll({
    height: '100vh',
    color: '#455A64',
    distance: '0',
    allowPageScroll: true, 
    alwaysVisible: true     
});

如何将SlimScroll应用于Body Element？

4 个答案: