4

所以我一直在尝试将插件应用到 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
  });
});

有谁知道我做错了什么？提前感谢您的回答

“如果我无法控制正文标签怎么办？我将模板嵌入到第 3 方网站中？所以正文没有 id 标签，它只有 view-source:avatars.imvu.com/LadyKonstantine”

4

4 回答 4

8

由于您需要在 body 上应用超薄滚动，因此您必须使用 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">

更多细节

Click here! to read more about slim scroll.

于 2014-07-03T12:45:31.910 回答
4

Attaching slimScroll directly to Body tag is not a preffered solution in my view. Try it and you will find the slimScroll wraps your BODY tag inside it's own DIV tag; at least I found it that way when I attempted to attached slimScroll to the BODY element. As a result, you will find the HTML of your page is a complete mess. The sequence of tags will be HEAD - slimScrollDiv - BODY. Instead, I suggest to have a wrapper DIV inside BODY immediately after you open BODY tag and then attach slimScroll to this wrapper DIV.

于 2016-11-03T04:10:51.790 回答
2

SlimScroll only works on div element. To achieve this, add a main wrapper just after the opening body tag. In this case I will call it:

In the HTML:

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

Then calculate the viewport height, not the HTML, document height. Once done, pass this value to the height of the slimscroll plugin. Example:

In the JS:

var viewportHeight= $(window).height();
$('#body').slimScroll({
    height: viewportHeight+'px',
    color: '#455A64',
    distance: '0',
    allowPageScroll: true, 
    alwaysVisible: true     
});
于 2017-07-28T05:11:59.553 回答
1

You can also use the new CSS value of vh to compute the height of slimscroll. Example: 

$('#body').slimScroll({
    height: '100vh',
    color: '#455A64',
    distance: '0',
    allowPageScroll: true, 
    alwaysVisible: true     
});
于 2017-07-28T05:16:37.440 回答