移动端的横条菜单滚动不换行代码

最新推荐文章于 2022-10-19 11:26:07 发布

小楫轻舟丶

最新推荐文章于 2022-10-19 11:26:07 发布

阅读量458

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/lioldamon/article/details/85273248

JQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS实现菜单滚动不换行的方法，通过设置特定样式使菜单项在水平方向上滚动而不换行，同时保持良好的触摸滚动体验。代码中详细展示了如何结合jQuery实现点击菜单项时的平滑滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示代码如下，最下面有jsbin的演示地址，或者你clone下来运行也ok

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
</head>
<body>
 菜单滚动不换行 css代码
<style>
  *{
    margin: 0;
    padding: 0;
  }

  div{
    margin:40px auto 0;
    height: 100%;
    background: #ccc;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
  }
  @media (min-width: 768px) {
    div{
      width: 500px;
      margin:0 auto;
    } 
  }
  a{
    background: #f00;
    display: inline-block;
    padding:0 10px;
    line-height: 50px;
    height:50px;
    white-space: nowrap;
  }
  a+a{
    margin-left: 10px;
  }
  .cur{
    color:#f0f;
    background: #0c0;
  }
</style>
  <div>
      <a href="javascript:void(0)" class="cur">菜单项1</a>
      <a href="javascript:void(0)">菜单项2</a>
      <a href="javascript:void(0)">菜单项3</a>
      <a href="javascript:void(0)">菜单项4</a>
      <a href="javascript:void(0)">菜单项5</a>
      <a href="javascript:void(0)">菜单项6</a>
      <a href="javascript:void(0)">菜单项7</a>
      <a href="javascript:void(0)">菜单项8</a>
  </div>
<script>
    $('a').click(function(){
      var offset_left=$(this).offset().left;
      var win_width = $(window).width()
      var this_width=$(this).width()
      var sl=$('div').scrollLeft();
      var w=sl+offset_left -(win_width-this_width)/2;
        $('div').scrollTo(parseInt(w),500 )
        
      $('a').removeClass('cur');
      $(this).addClass('cur');
    });
</script>
</body>
</html>

  
</body>
</html>

jsbin演示地址