Question

我正在尝试使用bootstrap构建一个集中划分的布局。屏幕的左侧应该是固定的，屏幕的右侧应该是可滚动的。

到目前为止它工作正常，但是当我在小型设备上测试布局时，屏幕的右侧部分会有两个滚动条。当我在小设备上隐藏滚动条时，右侧的内容不再可滚动。

将overflow:auto;更改为overflow:visible;可以解决两个滚动条的问题，但屏幕左侧不再固定，而是右侧滚动。 position:fixed;无法解决问题。

这是代码：

.lw { font-size: 60px; }

body {
  
  margin:  0;
}

#left {
  
  background-color:  yellow;
  height:  100%;
  overflow: hidden;
}

#right {
  background-color: pink;
  height: 100%;
  overflow: auto;
  text-align: center;
  font-size: 8vw;
}

.container_left {
  padding-top: 10%;
  padding-bottom: 10%;
}

#question {
  text-align: center;
  font-size: 4vw;
  padding-bottom: 50px;
}

#tip {
  text-align: center;
}

@media screen and (max-width: 768px) {
 #right{
   overflow: hidden;
 } 
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
    <div class="row">
    <div class="col-lg-6" id="left">
      <div class="container_left">
      <p id="question">Lorem ipsum dolor sit amet</p>
        <p id="tip">tip</p>
      </div>
    </div>
    <div class="col-lg-6" id="right">
      <p style="color:red">start</p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      <p style="color:red">end</p> 
    </div>
  </div>
</div>

</body>
</html>

我很感激你的意见。

最好的问候

Answer 1

应用此css隐藏第二个块中的滚动条。这将隐藏该单个元素中的滚动条，但保留站点的主滚动条：

#element::-webkit-scrollbar { 
    display: none; 
}

请注意，这不会提供完整的浏览器支持。

另一个更好的解决方案是重新修改你的html / css，以便第一个块设置在固定位置，而页面的其余部分正常滚动。这将跨平台提供更广泛的支持。这样你就不会摆弄滚动条。

中央划分布局上的两个滚动条

1 个答案: