一个点击两侧可以滚动标签页或导航栏的小功能

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_45140796

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量101

点赞数

文章标签：滚动导航标签页 JavaScript CSS 点击事件

本文链接：https://blog.csdn.net/weixin_45140796/article/details/115953095

版权

一个点击两侧可以滚动标签页或导航栏的小功能

效果演示
代码及详情实现

效果演示

在这里插入图片描述

代码及详情实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 800px;
        overflow-x: scroll;
    }
    ul {
        white-space:nowrap;
        /* width: 500px; */
        text-align: center;
        position: relative;
        border: 0;
        box-sizing: border-box;
    }
    li {
        display: inline-block;
        width: 100px;
        height: 50px;
        line-height: 50px;
        list-style: none;
        overflow: hidden;
        border: 0;
        box-sizing: border-box;
    }
</style>
<body>
    <div>
        <ul>
            <li onclick="func(0)">1</li>
            <li onclick="func(1)">2</li>
            <li onclick="func(2)">3</li>
            <li onclick="func(3)">4</li>
            <li onclick="func(4)">5</li>
            <li onclick="func(5)">6</li>
            <li onclick="func(6)">7</li>
            <li onclick="func(7)">8</li>
            <li onclick="func(8)">9</li>
            <li onclick="func(9)">10</li>
            <li onclick="func(10)">11</li>
            <li onclick="func(11)">12</li>
            <li onclick="func(12)">13</li>
        </ul>
    </div>
</body>
</html>

<script>
    function func(i) {
        
        // TODO: 父元素的DOM对象
        let parentDom = document.getElementsByTagName('div')[0]
        /**
         * TODO: 判断点击元素的下标
         * 如果是第一个，让滚动条距离左侧距离直接为0
         * 如果是最后一个，则  滚动条距离左侧的距离 = 父元素滚动条滚动的距离 + 父元素的实际宽度
         * 如果两者都不是，则  获取点击元素的前一个元素和后一个元素，并判断：
         *      如果后一个元素距离左侧距离（TODO: 后一个元素距离左侧的距离需加上它的实际宽度）大于父元素滚动条的滚动的距离和父元素实际宽度的总和，说明后面还有元素，
         *          则 滚动条距离左侧的距离 = 后一个元素距离左侧距离 — 父元素实际宽度的总和
         *      如果前一个元素距离左侧距离小于父元素滚动条的滚动的距离，说明前面有元素，
         *          则 滚动条距离左侧的距离 = 前一个元素距离左侧距离
        */
        if (i === 0) {
            parentDom.scrollLeft = 0
        } else if (i === document.getElementsByTagName('li').length - 1) {
            parentDom.scrollLeft = parentDom.scrollWidth + parentDom.offsetWidth
        } else {
            // TODO: 前一个DOM元素距离左侧距离
            var pervDom = document.getElementsByTagName('li')[i - 1].offsetLeft
            // TODO: 后一个DOM元素距离左侧距离
            let nextDom = document.getElementsByTagName('li')[i + 1].offsetLeft + document.getElementsByTagName('li')[i + 1].offsetWidth
            if (nextDom > parentDom.scrollLeft + parentDom.offsetWidth) {
                parentDom.scrollLeft = nextDom - parentDom.offsetWidth
            } else if (pervDom < parentDom.scrollLeft) {
                parentDom.scrollLeft = pervDom
            }
        }
    }
</script>

weixin_45140796

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个点击两侧可以滚动标签页或导航栏的小功能

一个点击两侧可以滚动标签页或导航栏的小功能效果演示代码及详情实现效果演示代码及详情实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
复制链接

扫一扫