相关疑难解决方法(0)

我正在尝试在使用灯箱时禁用父级的html/body滚动条.这里的主要词是禁用.我也没有想隐藏它overflow: hidden;.

这样做的原因是overflow: hidden使网站跳转并占据滚动区域.

我想知道是否可以在显示时禁用滚动条.

如何在JavaScript中确定水平滚动条的高度或垂直滚动​​条的宽度？

当没有内联高度声明时,是否有人知道是否可以获得元素的高度(减去垂直填充,边框和边距)？我需要支持IE8及以上版本.

el.style.height 不起作用,因为样式是在外部样式表中设置的.

el.offsetHeight或者el.clientHeight不起作用,因为它们不仅仅包含元素的高度.而且我不能只减去元素的填充等,因为这些值也是在CSS样式表中设置的,而不是内联的(因此el.style.paddingTop不起作用).

也做不到window.getComputedStyle(el)因为IE8不支持这个.

jQuery有height()方法,它提供了这个,但是我没有在这个项目中使用jQuery,而且我只是想知道如何在纯JavaScript中执行此操作.

有人有什么想法？非常感激.

假设我有一个静态网页并且整个页面被包装,让我们说在700px的宽度内,现在如果页面的内容太长,那么(显然)会出现一个滚动条.但是滚动条的外观会将所有内容移动到左侧,就像几个像素一样(需要适合页面右侧的滚动条).我想要做的是删除这个"移动"效果,这样如果需要滚动条,这不会以任何方式影响页面的内容.

我不知道我是否清楚自己.

让我们说这是一个网页:

| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |

这就是滚动条的外观:

| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ...... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | …

我不确定标题是否清楚,所以解释的话很少.我有几个小元素,比方说div(200pxx 400px常数).在每个内部,有一个段落有大约20行文本.当然,这对于一个可怜的小div来说很重要.我想做的是:

1. 通常div有overflow: hidden属性.
2. 在鼠标over(:hover)上,此属性更改为overflow: auto;,并显示滚动条.

问题是什么？我想在段落文本和滚动条之间留一点空间(填充或边距).让我们说该段有一个对称的margin: 20px;.但是在:hover触发器打开后,会出现滚动条,并且段落的整个右侧都会"scrollbar-width" px向左移动.句子在其他行中被打破,整个段落看起来不同,这非常烦人且不方便用户使用.我怎样才能设置我的CSS,所以悬停后唯一的变化就是scroolbar的外观？

换一种说法:

/* Normally no scrollbar */
div {display: block; width: 400px; height: 200px; overflow: hidden;}
/* On hover scrollbar appears */
div:hover {overflow: auto;}

/* Paragraph margin predicted for future scrollbar on div */
div p {margin: 20px (20px + scrollbarwidth px) 20px 50px;}
/* With scrollbar margin is symmetrical …

有没有办法在我测试一些布局代码时临时更改FF或IE中的滚动条宽度？

我记得曾经读过一些关于这与解决方案有关的内容,但不记得了.我尝试改变计算机本身的分辨率,尝试增加浏览器字体大小,但两者都不起作用.

更新 我遇到过这个描述如何在Firefox中编辑设置的线程,但它不能顺利运行,至少对我来说还不顺利.提问者说它最终适合他,所以我稍后会做更多的测试.

使用响应式布局和大量CSS来创建网页,我遇到了隐藏或显示滚动条并将布局更改为17px的问题.

主要问题是在OSX上滚动条悬停在整个布局上而不影响它,但在Windows上的任何浏览器中,例如滚动条是布局的一部分,因此将其移动到左侧宽度为17px.

为了解决这个问题,我开始检测以下浏览器:

if($.browser.chrome) {
   // adapt layout by 17px
} else if ($.browser.mozilla) {
   // adapt layout by 17px
}  else if ($.browser.safari) {
   // dont adapt layout by 17px
}

但在阅读了很多关于该主题的帖子后,我意识到不是检测浏览器,而是许多人建议使用功能检测.那么有没有办法找出浏览器如何处理滚动条？他们是否会成为页面布局的一部分,或者他们只会徘徊在Safari之类的所有内容之上？

谢谢你的帮助!

我有这个可滚动的表,并注意到它只移动它tbody不是thead它的应该是这样的,但是滚动条在里面,table这使得thead和tbodydisarrange,所以我有一个想法将滚动条移动到表外,但我不知道如何做到滚动条.你能告诉我怎么做吗？

"健康长寿·繁荣昌盛"

由此

对此

function removeClassName(elem, className) {
  elem.className = elem.className.replace(className, "").trim();
}

function addCSSClass(elem, className) {
  removeClassName(elem, className);
  elem.className = (elem.className + " " + className).trim();
}

String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/, "");
};

function stripedTable() {
  if (document.getElementById && document.getElementsByTagName) {
    var allTables = document.getElementsByTagName('table');
    if (!allTables) {
      return;
    }

    for (var i = 0; i < allTables.length; i++) {
      if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
        var trs …

我正在开发一个Web界面，该界面利用粘性定位来进行大量滚动，除了一个小细节外，它的工作方式非常漂亮。下面是一个简单的示例。您可以在CodePen上进行尝试，以查看水平和垂直滚动时胶粘物的工作方式。

<header>
 <nav>
  <ul id=menu class=flex><li><a href="#">Menu bar item</a></li></ul>
 </nav>
 <div class=flex>
  <div id=button>Button</div>
  <div id=bar>Bar wider than the window</div>
 </div>
</header>
<main class=flex>
 <div id=leftbar></div>
 <div id=content></div>
</main>

*           {line-height: 2em; background-position: center center}
body        {margin: 0; padding: 0}
body, a     {color: #fff}
ul,li       {margin: 0; padding: 0; list-style-type: none}
.flex       {display: flex}
.flex > *   {flex: 0 0 auto}
header      {display: block; position: sticky; top: 0; left: 0; z-index: 1;
             width: min-content; min-width: 100%; …

不幸的100vh是,并不总是与100%浏览器高度相同,如下例所示.

html,
body {
    height: 100%;
}

body {
    overflow: scroll;
}

.vh {
    background-color: blue;
    float: left;
    height: 50vh;
    width: 100px;
}

.pc {
    background-color: green;
    float: left;
    height: 50%;
    width: 100px;
}

<div class="vh"></div>
<div class="pc"></div>

这个问题在iPhone 6+上更为明显,上部位置栏和下部导航栏如何在滚动时展开和收缩,但不包括在计算中100vh.

100%可以通过window.innerHeight在JS中使用来获取高度的实际值.

有没有一种方便的方法来计算100vhJS中像素的当前转换？

我试图避免需要生成带内联样式的虚拟元素来计算100vh.

出于此问题的目的,假设一个恶意环境,其中max-width或max-height可能产生不正确的值,并且100vh页面上没有任何现有元素.基本上,假设任何可能出错的东西都有本机浏览器功能,但保证是干净的.

到目前为止我提出的最好的是:

function vh() {
    var div,
        h;
    div = document.createElement('div');
    div.style.height = '100vh';
    div.style.maxHeight = …