Question

还有一个问题是如何计算浏览器的滚动条大小。

我的问题是关于在npm包scrollbar-wdith中实现的解决方案。有人可以解释它为什么有效吗？

供参考，以下是相关代码（.coffee）：

scrollbarWidth = null

getScrollbarWidth = (recalculate = false) ->
  return scrollbarWidth if scrollbarWidth? and not recalculate

  return null if document.readyState is 'loading'

  div1 = document.createElement 'div'
  div2 = document.createElement 'div'

  div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px'
  div1.style.overflow = 'scroll'
  div2.style.overflow = 'hidden'

  document.body.appendChild div1
  document.body.appendChild div2

  scrollbarWidth = Math.abs div1.scrollHeight - div2.scrollHeight

  document.body.removeChild div1
  document.body.removeChild div2

  scrollbarWidth

Answer 1

这就是我的所作所为。解决了代码的关键并将其简化了一下。

<html>
<head>
</head>
<body>
</body>
<script>
  var scrollbarWidth;

  scrollbarWidth = null;

  getScrollbarWidth = function(recalculate) {
    var div1, div2;
    div1 = document.createElement('div');
    div2 = document.createElement('div');
    div1.id = "div1";
    div2.id = "div2";
    div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px';
    div1.style.overflow = 'scroll';
    div2.style.overflow = 'hidden';
    document.body.appendChild(div1);
    document.body.appendChild(div2);
    scrollbarWidth = Math.abs(div1.scrollHeight - div2.scrollHeight);
    alert(scrollbarWidth);
    return scrollbarWidth;
  };

  getScrollbarWidth();

</script>
<html>

这让我玩弄元素。

会发生的是他们创建两个相同的div，一个带滚动条，另一个没有滚动条，然后他们查询两个滚动条的scrollHeight属性，忽略滚动条（只是元素和填充）..请看这里 - http://www.w3schools.com/jsref/prop_element_scrollheight.asp

scrollHeight属性返回元素的整个高度（以像素为单位），包括填充，但不返回边框，滚动条或边距。

scrollHeights的差异产生了所需的滚动条的高度（因为其中一个元素有一个滚动条，另一个没有滚动条）

事实证明，div2 scrollHeight = 100 px（= height），而div1的scrollHeight只有83px，因此chrome的滚动条高度为17px

如果这对您有意义，请告诉我

Answer 2

这是一个更简单的剪辑，它还将滚动条的像素大小设置为if (message.content.startsWith(prefix + 'latest')) { //website url variables var website_domain = "websitedomain.com/"; var website_path = args; var website_url = website_domain + website_path; //array for elements scrapped var titles = []; var captions = []; var images_long = []; //opening url and scrapping elements function scrapData(website_url) { request(website_url, function(err, resp, body) { var $ = cheerio.load(body); //retrieves titles $('.title').each(function() { var title = $(this).children('h2').children('span').text(); titles.push(title); }); //retrieves captions $('.post-box-excerpt').each(function() { var caption = $(this).children('p').text(); captions.push(caption); }); //retrieves images $('.thumbnail').each(function() { var image = $(this).children('img').attr('src'); images_long.push(image); }); }); } scrapData(website_url); //produce embed messages for (i = 0; i < titles.length; i++) { const embed = new Discord.RichEmbed() .setColor('#8E44AD') .addField(((i + 1) + ". " + titles[i]), captions[i], true); //set images here message.channel.send({embed}); } }的CSS自定义属性（如果您的浏览器支持该规范）：

--scrollbar

计算浏览器的滚动条大小

2 个答案: