使用turnjs开发翻书组件时下方按钮div重叠不堆叠如何解决

问题原因 #

出现重叠是因为翻书容器的高度计算不符合文档流规则，具体如下：

• .flipbook-viewport 被强制设置为height: 100% !important，高度占满视口，且内部翻书使用了transform偏移、负边距定位，没有实际撑开父容器的高度，导致后续的按钮容器识别不到翻书的实际底部位置，直接从翻书容器的文档流位置开始渲染，出现重叠。
• 手动设置的大量top/left偏移也会干扰正常的元素位置计算。

调整方案 #

1. 修改CSS代码 #

替换原有对应样式即可，不需要修改HTML和JS逻辑：

body{
    /* 隐藏视口外内容可以保留，如果需要整体滚动改为auto即可 */
    overflow:hidden;
    background-color:#fcfcfc;
    margin:0;
    padding:0;
}

.flipbook-viewport {
    overflow: hidden;
    width: 100%;
    /* 删除原有height: 100% !important规则 */
    overflow-anchor: none;
    /* 原有top:100px改为padding-top，避免容器位置偏移但高度不撑开 */
    padding-top: 100px;
    position: relative;
    /* 给按钮预留底部空间 */
    margin-bottom: 80px;
}
.flipbook-viewport .container {
    position: relative;
    margin: auto;
    /* 删除原有top:45%、left:37%偏移规则 */
    height: auto;
    width: 100%;
}
.flipbook-viewport .flipbook {
    /* 删除原有top:-30%、left:-32%偏移规则，turnjs的autoCenter已经可以实现自动居中 */
}

/* 删除原有.flipbook的transform: translate(-50%, -50%)规则 */

.button{
    /* 删除原有left:45%规则，改为父容器统一居中 */
    margin: 0 12px;
}

.buttonsDiv {
    position: relative;
    display:block; 
    /* 按钮组整体居中 */
    text-align: center;
}

2. 可选适配优化 #

如果需要适配不同屏幕尺寸，可以在JS初始化翻书后，动态设置.flipbook-viewport的高度等于翻书高度加上上下间距：

// 放在翻书初始化代码之后
const flipbookHeight = $('.flipbook').height();
$('.flipbook-viewport').height(flipbookHeight + 120); // 120是上下边距总和，可自行调整

内容的提问来源于stack exchange，提问作者mmm000