带有纵向滑动的div，滚动到内容的30%怎么写

要实现一个带有纵向滑动效果，并让div内容滚动到其高度的30%，你可以使用CSS和JavaScript配合来实现。这里提供一种基本的方法：

首先，在HTML中创建一个`<div>`元素，例如：

<div class="scrollable-content">
  <!-- 这里放置需要滚动的内容 -->
</div>

然后，在CSS中设置样式，包括滚动条、宽度、高度以及初始滚动位置：

.scrollable-content {
  overflow-y: auto; /* 添加垂直滚动条 */
  width: 300px; /* 设置宽度 */
  height: 400px; /* 设置高度，可以根据实际需求调整 */
  padding-top: calc(30% - 50px); /* 30%的高度减去滚动条占用空间 */
}

/* 如果滚动条样式不是默认样式，可以额外修改滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: #888;
}

最后，如果你希望在页面加载后自动滚动到30%，可以使用JavaScript：

window.addEventListener('DOMContentLoaded', function () {
  const contentDiv = document.querySelector('.scrollable-content');
  contentDiv.scrollTop = Math.round(contentDiv.scrollHeight * 0.3);
});

这个例子假设你的`contentDiv`已经设置了合理的高度。如果内容的高度会动态变化，可能需要监听内容的高度变化并相应地更新滚动位置。