Question

我正在尝试在应用中注释特定的功能，并且注释显示在内容列的一侧。该列是一个固定的高度与自定义滚动器，所以我需要溢出y自动或滚动 - 溢出-x是可见的，因此注释是可见的。

我知道在同一个元素上设置auto / visible是不可能的，但是我已经在SO上找到了解决方案，其中列设置为overflow-y auto，并且包装器设置为溢出可见 - 但我可以让它运转起来。

我使用当前的实现设置了一个JSBin - https://jsbin.com/woduciv/edit?html,css,output

本质：

.wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
}
.column {
  position: fixed;
  left: 0;
  height: 100%;
  width: 25%;
  overflow: visible;
}
.column__content {
  position: static;
  overflow-y: scroll;
  height: 100%;
  width: 100%;
}

有没有人知道x轴可见的解决方案，并且y滚动已启用？

谢谢：）

Answer 1

试试这个：

＆＃13;

body {
  height: 100%;
  margin: 0;
  font-family: 'Unica One', sans-serif;
  background: #fff;
}
.custom-panel {
  border-radius: 0;
  height: 300px;
  overflow: scroll;
  padding: 15px;
  width: 400px;
}
.custom-panel p {
  min-width: 500px;
  width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
		<div class="col-sm-6">
			<div class="panel custom-panel">
				<p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			</div>
		</div>
</div>

＆＃13;

希望这会对你有所帮助!!

处理固定高度，可滚动容器上的溢出

1 个答案: