CSS+HTML滚动效果，滚动选择器

最新推荐文章于 2023-06-02 11:37:11 发布

little_shallot

最新推荐文章于 2023-06-02 11:37:11 发布

阅读量4.5k

点赞数 5

分类专栏：小案例文章标签： css javascript html

本文链接：https://blog.csdn.net/little_shallot/article/details/109425044

版权

小案例专栏收录该内容

21 篇文章 2 订阅

订阅专栏

之前看到一个案例是一个滚动的效果，是用css和html写的一个滚动选择器，主要是用了css里面的scroll-snap-type 和 scroll-snap-align 他们有不同的参数可以实现不同的效果，小白不太熟悉，需要的话可以去看文档，下面是效果图

在这里插入图片描述

这个是实现的方法，但是那个案例并没有说如何获取当前值，所以我就自己尝试去琢磨了下，

//元素页面居中
 body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
 * {
        margin: 0;
        padding: 0;
    }
    /* 最大盒子 */
    .box {
        list-style: none;
        width: 400px;
        height: 300px;
        overflow: auto;
        scroll-snap-type: y mandatory;
      /* scroll-snap-type: y mandatory 中，y 表示捕捉 y 轴方向上的滚动，
       mandatory 表示强制将滚动结束后元素的停留位置设置到我们规定的地方。 */
    }
   
    .box li {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1.2rem;
        color: #333;
        scroll-snap-align: start;
      /* 滚动父容器元素设置scroll-snap-type:y mandatory，强制定位， 子列表元素设置scroll-snap-start使当前聚焦的滚动子元素在滚动方向上相对于父容器顶部对齐，于是效果达成。 */
    }
    .box li:last-child {
        margin-bottom: 120px;
    }
    /* 整体居中 */
    .div {
        width: 400px;
        height: 300px;
        position: relative;
        background: linear-gradient(to bottom, rgba(117, 107, 128, 0.3) 0%, rgba(117, 107, 128, 0) 25%, rgba(117, 107, 128, 0) 75%, rgba(117, 107, 128, .3) 100%);
        box-shadow: inset 0px 0px 12px rgba(0, 0, 0, .2);
        border-radius: 12px;
    }

    /* 选择框 */
    .div::after {
        content: '';
        position: absolute;
        top: 120px;
        width: 100%;
        height: 60px;
        background: linear-gradient(to bottom, rgba(117, 107, 128, 0.1) 0%, rgba(117, 107, 128, .2) 50%, rgba(117, 107, 128, .25) 50%, rgba(117, 107, 128, .1) 100%);
        pointer-events: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
        border-top: 1px solid rgba(0, 0, 0, .12);
        border-bottom: 1px solid rgba(0, 0, 0, .12);
    }
    //清除滚动条
    ::-webkit-scrollbar {

        display: none;
    }
</style>

<body>
    <div class="div">
        <ul class="box">
        /*  开头需要空两行*/
            <li></li> 
            <li></li>
            <li>第一</li>
            <li>第二</li>
            <li>地三</li>
            <li>第四</li>
            <li>第五</li>
            <li>第六</li>
            <li>第七</li>
            <li>第八</li>
            <li>第九</li>
            <li>第十</li>
        </ul>
    </div>
     <script>
        // 获取ul
        document.querySelector('ul').addEventListener('scroll', ajacs(1000))
        // 防抖定时器
        function ajacs(times) {
            var time = null
            return function () {
                if (time !== null) {
                    clearTimeout(time);
                }
                /*获取滚动条高度*/
                let scrollTop = this.scrollTop
                time = setTimeout(() => {
                 /* 事件结束开始执行最终方法*/
                    return ajas(scrollTop)
                }, times);
            }
        }
        // 最终输出位置
        function ajas(scrollTop) {
            //读取滚动条的位置
            /*60是每一块的高度，前面两个是空的从0开始算起，需要＋1才能符合当前位置*/
            let list = scrollTop / 60 + 1
            console.log('选中第' + list + '个元素');
        }

    </script>
</body>

</html>

最终获取的效果就是这样在这里插入代码片
在这里插入图片描述
小白一个，可能我这个不是正确的写法，只能当做参考，如果有错请多多包涵！

little_shallot

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
CSS+HTML滚动效果，滚动选择器

之前看到一个案例是一个滚动的效果，是用css和html写的一个滚动选择器，主要是用了css里面的scroll-snap-type 和 scroll-snap-align 他们有不同的参数可以实现不同的效果，小白不太熟悉，需要的话可以去看文档，下面是效果图这个是实现的方法，但是那个案例并没有说如何获取当前值，所以我就自己尝试去琢磨了下，//元素页面居中 body { display: flex; justify-content: center;
复制链接

扫一扫