HTML 叠加透屏实现

Question

我想实现一个穿过另一个屏幕的可拖动覆盖屏幕（最初位于下半部分）。我希望它看起来如何的示例如下所述 - https://medium.com/@iamWaseem99/how-to-make-swipable-draggable-overlay-views-in-swift-xcode-82a86adece9c.

有关当前使用的工具的披露 - TailwindCSS 用于样式，HTML、CSS 和通过 Stimulus JS 框架的 JS。

当前方法 - 我已经安装了 Hammer JS 并试图通过跟踪“panup”事件并调整两个 div 的高度来实现这一点，使其看起来像是穿过底部屏幕。这最终变得一团糟，想知道是否有更简洁的方法来实现这一目标。

我找到了一个 React 库 - https://github.com/manufont/react-swipeable-bottom-sheet，但是我目前没有使用 React 框架，所以想知道是否有任何替代方法可以实现这一目标。

谢谢！

Answer 1

基于你问题中的两个 links，我用 Hammer.js 做了一个解决方案，但是用“滑动”和 top 而不是“panup” 身高。我不知道你觉得什么乱七八糟的，但我觉得很干净：

hammerOverlay.on('swipe', (e) => {
    overlay.style.top = ( e.deltaY < 0 ) ? 0 : (window.innerHeight - triggerHeight) + 'px';
});

工作示例：

const overlay = document.querySelector('#overlay');
const triggerHeight = document.querySelector('#trigger').clientHeight;
const hammerOverlay = new Hammer(overlay);

hammerOverlay.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
hammerOverlay.on('swipe', (e) => {
    overlay.style.top = ( e.deltaY < 0 ) ? 0 : (window.innerHeight - triggerHeight) + 'px';
});

#wrapper {
    position: relative;
}
    
#overlay {
    position: fixed;
    top: calc(100% - 50px);
    background-color: #ddd;
    transition: top 300ms;
}
    
#trigger h3 {
    height: 50px;
    margin: 0;
    text-align: center;
    background-color: #eee;
}

<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<div id="wrapper">
    <div id="overlay">
        <div id="trigger"><h3>Swipeable bottom sheet</h3></div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

如果您想要第一个 link 中的箭头，这里有 css 个箭头的解决方案：

const overlay2 = document.querySelector('#overlay2');
const triggerHeight2 = document.querySelector('#trigger2').clientHeight;
const hammerOverlay2 = new Hammer(overlay2);

hammerOverlay2.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
hammerOverlay2.on('swipe', (e) => {
    if( e.deltaY < 0 ) {
        overlay2.style.top =  0;
        overlay2.querySelector('.arrow').classList.remove('up');
        overlay2.querySelector('.arrow').classList.add('down');
        
    }
    else  {
        overlay2.style.top = (window.innerHeight - triggerHeight2) + 'px';
        overlay2.querySelector('.arrow').classList.remove('down');
        overlay2.querySelector('.arrow').classList.add('up');
    }
});

#wrapper {
    position: relative;
}
    
#overlay2 {
    position: fixed;
    top: calc(100% - 50px);
    background-color: #ddd;
    transition: top 300ms;
}
    
#trigger2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #eee;
}

.arrow {
    display: inline-block;
    padding: 3px;
    border: solid black;
    border-width: 0 3px 3px 0;
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<div id="wrapper">
    <div id="overlay2">
        <div id="trigger2"><i class="arrow up"></i></div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

HTML 叠加透屏实现

HTML Overlay pass-through screen implementation

html

javascript

css

mobile

tailwind-css