如何制作 swipe/scroll 功能来为社交媒体应用等媒体提供内容

Question

我正在对 tik tok 或 YouTube shorts 之类的应用进行头脑风暴我相信我可以使用我的 html/css 制作 UI 但我知道如何更好地实现滚动功能Java 因为那是我唯一熟悉的其他语言

谢谢！顺便说一句，这是我问的第一个问题希望我做对了

Answer 1

要创建这种平滑滚动，您可以使用 scrollToView() 方法。

在网站架构方面，我会做两个部分，每个部分填满整个屏幕，每个部分都加载视频。

index.html

<div id="first">
    <video width="320" height="240" controls>
        <source src="video1.mp4" type="video/mp4">
    </video>
</div>
<div id="second">
    <video width="320" height="240" controls>
        <source src="video2.mp4" type="video/mp4">
    </video>
</div>

main.css

#first, #second {
    width: 100vw;
    heihjt: 100vh;
}
body::-webkit-scrollbar {
    display: none;
}

接下来 javascript 您可以收听滚动动作。

main.js

var first_section  = document.getElementById('first')
var second_section = document.getElementById('second')

window.onscroll = function(){

    // scroll next into view
    second_section.scrollIntoView({behavior: "smooth"})

    // remove first_section element and create it below second_section element
    section_html = first_section.innerHtml
    first_section.remove()
    first_section = document.createElement(div)
    second_section.id = 'first'
    first_section.id = 'second'
    first_section.innerHtml = section_html
    second_section.parentNode.appendChild(first_section)
}

如何制作 swipe/scroll 功能来为社交媒体应用等媒体提供内容

How to make a swipe/scroll function that feeds media like social media apps

html

css

java

scroll

swipe