只用css解决跳动滚动条问题

当我们使用样式“margin0 auto”来实现网页内容居中的时候,回遇到这样的一个问题:

当页面在多内容和多内容切换的时候会出现主体内容抖动;

因为网页内容高度小于浏览器高度的时候滚动条是隐藏的,当网页内容高度大于浏览器高度的时候滚动条又出来了,这导致页面在水平方向会有小范围的位移;

经典解决样式如下:

Html:{

overflow-y:scroll;

}

这种处理方法会让滚动条总是保留在网页上面,不管是否你真的需要他。如果这个滚动条在不需要使用的情况下,它会变成灰色同时占用一定的宽度。页面永远不会出现内容跳动的问题,同时浏览器滚动条一直保留待用;

这样处理已经是非常完美的了。但是如果我们想解决这个问题呢。换一种说法,就是只有真的需要滚动条的时候才让它出现,同时解决页面跳动的问题。

我发现了一个使用”100vw“来解决这个问题的方法。100vw是指浏览器界面宽(包括滚动条和网页元素的宽)。使用CSS函数calc,我们可以获取这个页面和滚动条一样宽的左间距(无形的)。当滚动条没有出来的时候,这个间距它是隐藏的。不管是给右边距还是左边距,他的效果总是一样的。注意:技术这个滚动条宽度的方法只有当html标签有overflow:auto;的时候才会生效.

html{

margin-left:calc(100w - 100%);

margin-left:0;

}

这样处理会有个小问题:当你使用了响应式设计(当你需要的时候!),页面越小,它会变得特别明显左边的间距会比右边大。这个问题在移动设备上不会出现,因为在移动设备上不经常出现滚动条。但是在浏览器调整大小的时候,在桌面浏览器上上会显得特别丑。

可以使用以下代码,限制它只能在更大的视窗里面:

@media  screen  and (min-width:960px){

html{

   margin-left:calc(100w - 100%);

   margin-left:0;

 }

}

这里的960px是随意写的,它应该比你的主题网页内容宽度大一点(大概150px左右就好);

这个诀窍它只在一些现代浏览器上工作。它会在旧的浏览器上优雅降权(页面仍旧会跳动)。旧的浏览器不会理解合格规则,所以他们会直接跳过它。

支持的浏览器包括,IE9ChromeFirefox,但是OperaClassic)和Safari7不支持。由于WebKit在处理calc和新的界面尺寸(VMvhvminvmax)上的bug,我想Safari不会有效。我不是很清楚Opera Classic,但是更新的Opera是可以的,因为它基于Chromium源码的。

这是我第一次发布博客。我真想希望他是对别人有帮助的。在这同时,它是一个见证-它是真实有用的。因为这个是我自己写的博客引擎。

更新——

在被CSS-Tricks选中后,我烧毁了月1GB的带款。这页面最大的一部分内容是大约60kb足有的iconhtmlcss每个几乎不到1kb),我猜大于有15000个独立ip的浏览者!!我是新的博客。突然有这么多访问是。。。。。。。。非常的惊讶。

不管怎么说,在评论区我获得了一些评论。我在Google网站管理员工具中通过外部链接的形式。我没有一个关于我的页面,我仍旧不能获得统计数据或者任何数据接口,所以GWT是唯一我能里找到关于我的网站的的地方。

首先,Mark Senff的研究提供了一个有效的解决方法:

它存在一个副作用,它会隐藏网页右侧和滚动条大小一样宽度的内容,同时他还会禁用水平滚动。所以我个人不会使用它,。

Html{

width:100vw;

           Overflow-x:hidden;

}

我的滚动条处理技巧之适用于内容居中的设计,其他的一些情况不一定适用。他举了个例子包含一个占用全部浏览器屏幕的宽度标题,主要是左对齐。当然,例如一个标题它不会跳动特别明显。相比之下,下面的文本将非常适合它,并且我发现这个技巧可以适用于页面的一部分。我已经把一个劲简单的例子提交到了codepen.io.

其他在网络上的解决方法如下:

                                                                                                                                                      谢谢所有人。


文章翻译:https://aykevl.nl/2014/09/fix-jumping-scrollbar

相关文章
相关标签/搜索