横向自适应导航示例

 <div class="navBar" id="navBar">
                                <style>
                                    .tf_sort_navcontainer {
                                        width: 100%;
                                        height: 60px;
                                        background: #f5f7fa;
                                        overflow: hidden;
                                        position: relative; /* 保持relative定位 */
                                    }
                                    
                                    /* 添加右侧渐变遮罩 */
                                    .tf_sort_navcontainer::after {
                                        content: '';
                                        position: absolute;
                                        top: 0;
                                        right: 0;
                                        width: 50px; /* 渐变区域的宽度 */
                                        height: 100%;
                                        background: linear-gradient(to right, rgba(245, 247, 250, 0.5), rgba(245, 247, 250, 1));
                                        pointer-events: none; /* 确保遮罩不会影响鼠标事件 */
                                    }
                            
                                    .tf_sort_navwrapper {
                                        height: 100%;
                                        overflow-x: auto;
                                        overflow-y: hidden;
                                        white-space: nowrap;
                                        -webkit-overflow-scrolling: touch;
                                        /* 隐藏滚动条 */
                                        scrollbar-width: none;
                                        -ms-overflow-style: none;
                                        cursor: grab; /* 添加抓手光标 */
                                    }
                            
                                    .tf_sort_navwrapper::-webkit-scrollbar {
                                        display: none;
                                    }
                            
                                    .tf_sort_navwrapper.grabbing {
                                        cursor: grabbing;
                                    }
                            
                                    .tf_sort_navlist {
                                        display: inline-block;
                                        height: 100%;
                                        padding: 0 15px;
                                    }
                            
                                    .tf_sort_navitem {
                                        display: inline-block;
                                        height: 100%;
                                        padding: 0 20px;
                                        font-size: 16px;
                                        color: #333;
                                        line-height: 60px;
                                        cursor: pointer;
                                        transition: all 0.3s;
                                        user-select: none; /* 防止文字被选中 */
                                    }
                            
                                    .tf_sort_navitem.active {
                                        color: #1890ff;
                                        position: relative;
                                    }
                            
                                    .tf_sort_navitem.active::after {
                                        content: '';
                                        position: absolute;
                                        bottom: 0;
                                        left: 50%;
                                        transform: translateX(-50%);
                                        width: 24px;
                                        height: 3px;
                                        background: #1890ff;
                                        border-radius: 2px;
                                    }
                            
                                    .tf_sort_navitem:hover {
                                        color: #1890ff;
                                    }
                                </style>
                                <div class="tf_sort_navcontainer">
                                    <div class="tf_sort_navwrapper">
                                        <div class="tf_sort_navlist">
                                            <div class="tf_sort_navitem active">首页</div>
                                            <div class="tf_sort_navitem">分类一</div>
                                            <div class="tf_sort_navitem">分类二</div>
                                            <div class="tf_sort_navitem">分类三</div>
                                            <div class="tf_sort_navitem">分类四</div>
                                            <div class="tf_sort_navitem">分类五</div>
                                            <div class="tf_sort_navitem">分类六</div>
                                            <div class="tf_sort_navitem">分类七</div>
                                            <div class="tf_sort_navitem">分类八</div>
                                            <div class="tf_sort_navitem">分类九</div>
                                            <div class="tf_sort_navitem">分类十</div>
                                            <div class="tf_sort_navitem">分类一</div>
                                            <div class="tf_sort_navitem">分类二</div>
                                            <div class="tf_sort_navitem">分类三</div>
                                            <div class="tf_sort_navitem">分类四</div>
                                            <div class="tf_sort_navitem">分类五</div>
                                            <div class="tf_sort_navitem">分类六</div>
                                            <div class="tf_sort_navitem">分类七</div>
                                            <div class="tf_sort_navitem">分类八</div>
                                            <div class="tf_sort_navitem">分类九</div>
                                            <div class="tf_sort_navitem">分类十</div>
                                            <div class="tf_sort_navitem">分类一</div>
                                            <div class="tf_sort_navitem">分类二</div>
                                            <div class="tf_sort_navitem">分类三</div>
                                            <div class="tf_sort_navitem">分类四</div>
                                            <div class="tf_sort_navitem">分类五</div>
                                            <div class="tf_sort_navitem">分类六</div>
                                            <div class="tf_sort_navitem">分类七</div>
                                            <div class="tf_sort_navitem">分类八</div>
                                            <div class="tf_sort_navitem">分类九</div>
                                            <div class="tf_sort_navitem">分类十</div>
                                        </div>
                                    </div>
                                </div>
                            
                                <script>
                                    (function() {
                                        const NavBarScroll = {
                                            init: function(navBarId) {
                                                const navBar = document.getElementById(navBarId);
                                                if (!navBar) return;
                                                
                                                const wrapper = navBar.querySelector('.tf_sort_navwrapper');
                                                const navItems = navBar.querySelectorAll('.tf_sort_navitem');
                                                
                                                let isMouseDown = false;
                                                let startX;
                                                let scrollLeft;
                                                
                                                wrapper.addEventListener('mousedown', (e) => {
                                                    isMouseDown = true;
                                                    wrapper.classList.add('grabbing');
                                                    startX = e.pageX - wrapper.offsetLeft;
                                                    scrollLeft = wrapper.scrollLeft;
                                                });
                                                
                                                wrapper.addEventListener('mouseleave', () => {
                                                    isMouseDown = false;
                                                    wrapper.classList.remove('grabbing');
                                                });
                                                
                                                wrapper.addEventListener('mouseup', () => {
                                                    isMouseDown = false; 
                                                    wrapper.classList.remove('grabbing');
                                                });
                                                
                                                wrapper.addEventListener('mousemove', (e) => {
                                                    if (!isMouseDown) return;
                                                    e.preventDefault();
                                                    const x = e.pageX - wrapper.offsetLeft;
                                                    const walk = (x - startX) * 2;
                                                    wrapper.scrollLeft = scrollLeft - walk;
                                                });
                                                
                                                navItems.forEach(item => {
                                                    item.addEventListener('click', (e) => {
                                                        if (isMouseDown) {
                                                            e.preventDefault();
                                                            return;
                                                        }
                                                        
                                                        navItems.forEach(nav => nav.classList.remove('active'));
                                                        item.classList.add('active');
                                                        
                                                        const itemLeft = item.offsetLeft;
                                                        const containerWidth = wrapper.offsetWidth;
                                                        const scrollPosition = itemLeft - (containerWidth / 2) + (item.offsetWidth / 2);
                                                        
                                                        wrapper.scrollTo({
                                                            left: scrollPosition,
                                                            behavior: 'smooth'
                                                        });
                                                    });
                                                });
                                                
                                                wrapper.addEventListener('selectstart', (e) => {
                                                    if (isMouseDown) {
                                                        e.preventDefault();
                                                    }
                                                });
                                            }
                                        };
                                    
                                        // 初始化
                                        NavBarScroll.init('navBar');
                                    })();

                            
                                </script>