欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

我如何在我的網站上用CSS中的對齊來修復水平滾動？

CSS
方一強2年前9瀏覽0評論

我要為學校做一個網站，我嘗試在CSS中用snap-align實現水平滾動。問題是，當我向下滾動時，什么也沒有發生，但是(在筆記本電腦的觸摸板上)，當我向右滾動時，它可以工作。由于我相對來說是web開發的新手，所以我使用這篇教程來學習snap-align機制:https://youtu.be/pNPkVQD7vlM.。此外，我發現有一種Javascript方法我一點也不熟悉。

*{
    margin: 0;
}
body {
    width: 100vw;
    height: 100vh;
}
.index_wrapper{
    width: 100%;
    height: 100%;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
}
.index_wrapper section{ 
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;    
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
}
.index_wrapper::-webkit-scrollbar {
    display: none;
}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Horizontal Scrolling</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <div class="index_wrapper">
            <section>
                <h1>Startpage</h1>
            </section>
            <section>
                <h1>Section 1</h1>
            </section>
            <section>
                <h1>Section 2</h1>
            </section>
            <section>
                <h1>Section 3</h1>  
            </section>  
        </div>
    </body>
</html>

是的，在納賽爾·奧懷默的幫助下，我終于自己找到了答案；我使用了他的腳本，但它不起作用，因為當你在JavaScript中創建常量(不可改變的變量)時，你需要寫下你的滾動容器的正確名稱。您還應該記住的是，如果您想讓它在筆記本電腦上工作，只需刪除“evt.preventDefault”即可，這只是禁用了一些東西的基本功能(在我的例子中是滾動)。

html:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Horizontal Scrolling</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <div class="index_wrapper">
            <section>
                <h1>Startpage</h1>
            </section>
            <section>
                <h1>Section 1</h1>
            </section>
            <section>
                <h1>Section 2</h1>
            </section>
            <section>
                <h1>Section 3</h1>  
            </section>  
        </div>
          <script>
              alert("Javascript works (delete this line in your editor)")
               let scrollSpeed = 10;
               const index_wrapper = document.querySelector(".index_wrapper");
               index_wrapper.addEventListener("wheel", (evt) => {
               index_wrapper.scrollLeft +=  (evt.deltaY+evt.deltaX)*scrollSpeed;
               });
         </script>  
    </body>
</html>

CSS:

*{
    margin: 0;
}
body {
    width: 100vw;
    height: 100vh;
}
.index_wrapper{
    width: 100%;
    height: 100%;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    scroll-behavior: smooth;
}
.index_wrapper section{ 
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;    
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
}
.index_wrapper::-webkit-scrollbar {
    display: none;
}

好吧，問題發生是因為電腦不是為橫向網站設計的。css中的這個特性基本上是為可觸摸設備設計的。但是我有幾個解決辦法:

使用javascript: 通過將此Javascript添加到& lt/body & gt；

<script>
         let scrollSpeed = 500;

         const index_wrapper = document.querySelector(".index_wrapper_div");
         index_wrapper.addEventListener("wheel", (evt) => {
         evt.preventDefault();
         index_wrapper.scrollLeft +=  (evt.deltaY+evt.deltaX)*scrollSpeed;
         });
    </script>

然后將這個css添加到。index_wrapper樣式:

scroll-behavior: smooth;

如果快速滾動你可以改變這個變量中的數字:

let scrollSpeed = 500;

您可以獲得更多信息:

用鼠標滾輪水平滾動:普通JavaScript 滾動行為 沒有Javascript 第一種解決方案，你可以要求網站訪問者在滾動時按住shift鍵。在大多數設備中，它可以水平滾動。

第二個解決方案，通過將scroll-snap-type改為y，將網站從水平轉換為垂直。

第三個解決方案，通過從scroll-snap-type中刪除mandatory使滾動條可見，并刪除:

.index_wrapper::-webkit-scrollbar{
    display: none;
 }