网站首页 » 前端开发 » div+css » 移动端用滚动条属性实现左右滚动效果
上一篇:
下一篇:

移动端用滚动条属性实现左右滚动效果

前言

移动端左右滚动,不是我们常说的图片切换,只是实现了通过手指实现内容的左右滚动。现在很多app 都会有这样的效果。在线 Demo :http://yunkus.com/demo/mobile-use-scroll-bar-property-realize-horizontal-scroll/。注意:浏览器得切换到手机模式查看效果哦!

入门代码

HTML 代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>移动端用滚动条属性实现左右滚动效果</title>
        <meta name="description" content="用滚动条属性实现左右滚动效果" />
        <meta name="keywords" content="移动端滚动效果,滚动效果,滚动" />
        <link rel="stylesheet" href="./css/style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    </head>
    <body>
        <div class="slide-wrap">
            <h2 class="slide-title">滚动效果</h2>
            <div class="slide-eara">
                <div class="tb-row">
                    <div class="tb-cell">
                        <div class="tb-item">
                            <div class="tb-img"><img alt="" src="http://yunkus.com/demo/lib/images/demo-1.jpg"></div>
                            <h3 class="tb-title">JavaScript</h3>
                            <p class="tb-des">JavaScript 是属于网络的脚本语言!是因特网上最流行的脚本语言。</p>
                        </div>
                    </div>
                    <div class="tb-cell">
                        <div class="tb-item">
                            <div class="tb-img"><img alt="" src="http://yunkus.com/demo/lib/images/demo-2.jpg"></div>
                            <h3 class="tb-title">jQuery</h3>
                            <p class="tb-des">jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程。</p>
                        </div>
                    </div>
                    <div class="tb-cell">
                        <div class="tb-item">
                            <div class="tb-img"><img alt="" src="http://yunkus.com/demo/lib/images/demo-3.jpg"></div>
                            <h3 class="tb-title">CSS3</h3>
                            <p class="tb-des">CSS3 用于控制网页的样式和布局。</p>
                        </div>
                    </div>
                    <div class="tb-cell">
                        <div class="tb-item">
                            <div class="tb-img"><img alt="" src="http://yunkus.com/demo/lib/images/demo-4.jpg"></div>
                            <h3 class="tb-title">HTML5</h3>
                            <p class="tb-des">HTML5 是下一代的 HTML。</p>
                        </div>
                    </div>
                    <div class="tb-cell">
                        <div class="tb-item">
                            <div class="tb-img"><img alt="" src="http://yunkus.com/demo/lib/images/demo-5.jpg"></div>
                            <h3 class="tb-title">Angular.js</h3>
                            <p class="tb-des">AngularJS 通过新的属性和表达式扩展了 HTML。 </p>
                        </div>
                    </div>
                    <div class="tb-cell">
                        <div class="tb-item">
                            <div class="tb-img"><img alt="" src="http://yunkus.com/demo/lib/images/demo-6.jpg"></div>
                            <h3 class="tb-title">Linux</h3>
                            <p class="tb-des">Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS 代码

* {
    margin: 0;
    padding: 0;
    border: none;
}
.slide-eara::-webkit-scrollbar {
    display: none;
}

.slide-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 12px;
    box-shadow: 0 0 2px #ccc;
}

.slide-wrap .slide-title {
    margin-top: 12px;
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 5px solid #ccc;
    font-size: 16px;
    font-weight: normal;
}

/*左右滚动样式*/
.slide-eara {
    width: 100%;
    min-height: .01%;

    overflow-x: auto;
}
.slide-eara .tb {
    display: table;
    width: 100%;
    max-width: 100%;
}
.slide-eara .tb-row {
    display: table-row;
}
.slide-eara .tb-cell {
    display: table-cell;
    width: 110px;
    padding: 0 8px 0 0;
}

.slide-eara .tb-item {
    width: 110px;
}

.slide-eara .tb-img,
.slide-eara .tb-img img {
    width: 110px;
    height: 54px;
}

.slide-eara .tb-title {
    font-size: 14px;
    font-weight: normal;
}

.slide-eara .tb-des {
    display: -webkit-box;
    font-size: 12px;
    color: #ccc;
    text-overflow: ellipsis;
    overflow: hidden;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/*左右滚动样式 END*/

上面这个示例是固定宽度的,不是很灵活,在实践的前端开发中总是不按常规出牌。比如用这个来做顶部导航(类似于今日头条中里的顶部导航),菜单的字数有多有少,固定宽度事必会出现问题,不过上面的代码还是可以通过进行一步的改进来达到宽度自适应的效果。不过这不没完,当你在苹果中测试这个左右滚动效果的时候,你会惊讶地发现左右滚动到菜单两端时会有回弹效果,也就是传说中的橡皮筋效果,但同时会出现黑色背景。这个背景看起来跟整个页面格格不入,所以必需去掉。但经过多方尝试后(各种添加背景),都无法修正黑色背景,这怎么办呢?

滚动插件

在这里有一个更好的解决方案,不过需要引入第三插件。虽然增加了一个文件,但效果还是挺让人满足的,使用这个插件后,左右滚动效果不仅仅滚完即止,而且还带有类似苹果系统中的橡皮筋效果,可动感了。官方网址:http://www.swiper.com.cn/

不要觉得这个插件只能用于轮播图,它也可以用于做类似于上面的左右滚动的导航条,用上这个插件,你可以轻轻松松设置滚动效果,即使是上面说到的宽度自适应,不得不承认它的强大。

代码全家桶
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper 实现导航左右滚动效果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../lib/js/swiper.min.css">
    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        background: #fff;

    }
    .swiper-slide {
        height: 40px;
        line-height: 40px;
        padding: 12px;
        width: auto;
        text-align: center;
        font-size: 18px;
        background: #fff;
    }
    .swiper-slide.active{
        border-bottom: 2px solid #373d41;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide active">HTML5</div>
            <div class="swiper-slide">前端开发</div>
            <div class="swiper-slide">CSS3</div>
            <div class="swiper-slide">JavaScript</div>
            <div class="swiper-slide">HTML+CSS</div>
            <div class="swiper-slide">Angular 4</div>
            <div class="swiper-slide">Node.js</div>
            <div class="swiper-slide">前端工具</div>
            <div class="swiper-slide">jQuery</div>
            <div class="swiper-slide">移动WEB</div>
        </div>
    </div>
    <!-- Swiper JS -->
    <script src="../lib/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
    });
    </script>
</body>
</html>

可以到这里查看效果:http://yunkus.com/demo/mobile-use-scroll-bar-property-realize-horizontal-scroll/swiper-demo.html

效果棒棒哒,收藏好,以后妈妈再也不用担心这样的滚动效果我天天加班都实现不了了。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/mobile-use-scroll-bar-property-realize-horizontal-scroll/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END