问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于better-scroll使用中遇到的问题

头像
热饭班长
    3.7k20241349

    如下图，我的菜单是加了overflow-x: auto的，可以左右滑动，查看溢出屏幕的部分，现在，我使用了better-scroll后，菜单像是失去了滑动感知一样，无法滑动了，该怎么解决这个问题呢？

    clipboard.png

    javascriptcsshtml
    阅读 1.8k
    1 个回答
    得票最新
    头像
    热饭班长
      3.7k20241349

      解决了，用嵌套的方式来处理

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style>
        *{
            padding: 0;
            margin: 0;
        }

        body{
            line-height: 1.7;
            font-family: 'Courier New', Courier, monospace;
        }

        .list-item{
            padding: 10px;
        }

        .list-item + .list-item{
            padding-top: 0;
        }

        .nav-list{
            display: flex;
        }
        
        .nav-item{
            flex-shrink: 0;
            padding: 10px;
        }

        .outer-wrapper{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }

        .inner-wrapper{
            overflow: hidden;
            background: #e1e1e1;
        }

        .nav-fixed-container{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            z-index: 999;
        }

        .nav-container{

        }
        .nav-container.hidden{
            visibility: hidden;
        }
    </style>

    <title>Document</title>
</head>
<body>

    <div class="nav-fixed-container" data-js-navFixedContainer></div>

    <div class="outer-wrapper" data-js-outerWrapper>
        <div class="outer-content" data-js-outerContent>
            
            <div class="nav-container" data-js-navContainer>
                <div class="inner-wrapper" data-js-innerWrapper>
                    <div class="inner-content" data-js-innerContnet>
                        <div class="nav-list" data-js-navList>
                            <div class="nav-item" data-js-navItem><a href="">话费充值</a></div>
                            <div class="nav-item" data-js-navItem><a href="">流量充值</a></div>
                            <div class="nav-item" data-js-navItem><a href="">油卡充值</a></div>
                            <div class="nav-item" data-js-navItem><a href="">视频充值</a></div>
                            <div class="nav-item" data-js-navItem><a href="">Q币充值</a></div>
                            <div class="nav-item" data-js-navItem><a href="">电费充值</a></div>
                            <div class="nav-item" data-js-navItem><a href="">其他充值</a></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="list">
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem <a href="">ipsum dolor</a> sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
                <div class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nulla sunt dolorum, recusandae, itaque voluptatum in accusamus velit error vero rerum ex similique possimus autem? Nam hic aspernatur a! Quis?</div>
            </div>

        </div>
    </div>

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/better-scroll/dist/bscroll.min.js"></script>
<script>

    var setInnerScrollContentWidth, setNavContainerHeight;

    var $outerWrapper      = $('data-js-outerWrapper');
    var $outerContent      = $outerWrapper.find('data-js-outerContent');

    var $innerWrapper      = $('[data-js-innerWrapper]');
    var $innerContent      = $innerWrapper.find('[data-js-innerContnet]');

    var $navList           = $('[data-js-navList]');
    var $navItems          = $navList.find('[data-js-navItem]');

    var $navContainer      = $('[data-js-navContainer]');
    var $navFixedContainer = $('[data-js-navFixedContainer]');;

    var navHeight = $navList.outerHeight(true);
    var navWidth = $navItems.eq(0).outerWidth(true) * $navItems.length;

    //  设置内部scroll宽度
    setInnerScrollContentWidth = function(width){
        $innerContent.css('width', width);
    };

    setNavContainerHeight = function(height){
        $navContainer.css('height', height);
    };

    var outerScroll = new BScroll('.outer-wrapper', {
        click: true,
        probeType: 2
    });

    //  监听容器滚动 达到条件后将菜单固定定位
    outerScroll.on('scroll', function(pos){
        var top = Math.abs(pos.y);
        if(top >= navHeight){
            $navFixedContainer.html($innerWrapper);
        }else{
            $navContainer.html($innerWrapper);
        }
    });


    //  设置内部scroll宽度
    setInnerScrollContentWidth(navWidth);
    setNavContainerHeight(navHeight);

    var innerScroll = new BScroll('.inner-wrapper', {
        click: true,
        scrollX: true
    });

</script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题