纯CSS方法,以防止滚动条的内容推到左侧?

问题描述 投票:2回答:4

有没有一种方法,以防止从滚动条,内容推送,或整个页面左边的纯CSS?我的意思是没有黑客或任何东西。

我试过两个JavaScript的解决方案:

1)将身体溢出隐藏,存储body.offsetWidth在一个变量,然后溢出可见,然后减去offsetWidth与当前body.offsetWidth和应用的差异右边距。

2)计算offsetWidth并将其应用在每个调整大小的包装股利。

什么不工作:

1)的位置是绝对的。

2)浮动一切左边是一个坏主意。

3)离开滚动条可见(很糟糕)。

4)溢出-γ隐藏使事情用户不友好。

html css css3 scrollbar overflow
4个回答
1
投票

不幸的是,没有其他办法可以防止你的问题。只要使用

     body {
        overflow:hidden;
     }

作为替代方案,我推荐你使用自定义滚动条的框架。或者禁止滚动,如图上面的片段,并用绝对定位和一些JS效仿。当然,你将不得不考虑计算页面的高度和滚动条拇指的偏移。

我希望帮助。


1
投票

只要给你的身体的100vw这样的宽度:

body{
   width: 100vw;
}

1
投票

有很多的方法去解决这个问题,尽管通常你不会介意一点点推到左侧:

  1. overflow-y: scrollbody并确保始终有一个滚动条。
  2. 利用一个事实,即视口宽度包括滚动条,而百分比不占它: 一种。给予width: 100vwbody元素,或 湾给予margin-left: calc(100vw - 100%)html元素,这样滚动条或没有,你有一个固定的区域上工作。
  3. 甚至还有绘制在页面上,而不是将其移动到左边的一个过时overflow: overlay属性。

0
投票

要禁用水平滚动条,您可以使用溢出-X,所以它不会影响你的垂直滚动:

body {
    overflow-x: hidden; 
}
© www.soinside.com 2019 - 2024. All rights reserved.