[分享]css元素周期表滚动

CSS元素周期表是一个用于快速参考CSS属性的有用工具。但是，当你需要查看更多属性时，周期表的尺寸可能变得有限。在这种情况下，滚动周期表是解决方案之一。滚动周期表让用户可以查看更多CSS属性而不会占用...

CSS元素周期表是一个用于快速参考CSS属性的有用工具。但是，当你需要查看更多属性时，周期表的尺寸可能变得有限。在这种情况下，滚动周期表是解决方案之一。滚动周期表让用户可以查看更多CSS属性而不会占用太多页面空间。

.周期表 {
  height: 300px;
  overflow-y: scroll;
} 

如上所示，使用CSS样式，在周期表的div或容器中添加“height:300px;”的代码，这将导致周期表显示在固定的高度中，并自动添加垂直滚动条。 “overflow-y：scroll;”这一行代码是关键点，因为它指定了在超出高度时自动添加垂直滚动条。

如果您想要水平滚动，可以简单地更改“overflow-y”为“overflow-x”，其他部分将保持不变。

.周期表 {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}
.周期表 .元素 {
  display: inline-block;
  width: 100px;
  height: 100px;
} 

除此之外，您可以在周表中添加鼠标滚轮控制。随着时间的推移，滚轮功能成为更方便使用的交互性工具。

.周期表 {
  overflow-y: hidden;
}
.周期表 .元素 {
  cursor: pointer;
  transition: transform .3s;
}
.周期表 .元素:focus {
  outline: none;
  transform: scale(1.2) rotate(7deg);
}
@media (hover: hover) {
  .周期表 .元素:hover {
    transform: scale(1.2) rotate(7deg);
  }
} 

若要在周期表中启用滚轮控制，您需要使用JavaScript或jQuery。下面代码演示了使用jQuery的示例

jQuery('.周期表').on('mousewheel', function(event) {
  var d = event.originalEvent.deltaY;
  this.scrollLeft += (d < 0 ? -1 : 1) * 30;
  event.preventDefault();
}); 

以上就是CSS元素周期表滚动的详细说明，祝您可以更轻松的查阅需要的CSS属性。