问答博客资讯标签用户活动
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

如何使用 JavaScript 实现 Google Play 商店内应用的水平滑动效果？

头像
Subilan
    616

    如题，搜索过了却都找到的是 Android 平台的实例。Google Play 商店内应用的水平滑动效果大概是指在一个<div>内有很多的图片，但是由于这个<div>有宽度，所以图片占满一行后就会换行，而我想实现的效果是不换行，直接平行显示，且可以通过滑动（手机直接用手势，电脑有横向滚动条）来浏览超出的内容。具体可以参考 Google Play 的应用推荐，它们的各种板块所使用的效果就是我需要的。

    google-playjavascripthtml5csscss3
    阅读 2k
    1 个回答
    得票最新
    头像
    kkocdko
      1121312
      ✓ 已被采纳

      只需:

      white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;

      Demo:

      <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                background: #607D8B;
            }

            #screenshot {
                height: 310px;
                white-space: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                margin-top: 40px;
            }

            #screenshot>img {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="screenshot">
            <img src="http://image.coolapk.com/apk_image/2017/0212/via_screenshot1-for-14736-o_1b8ol45kt4shu531u8018vnodh13-uid-441319.png.t.jpg" data-toggle="modal" data-target="#ex-screenshot-modal" onclick="$(&quot;#ex-screenshot-carousel&quot;).carousel(0);">
            <img src="http://image.coolapk.com/apk_image/2017/0212/via_screenshot2-for-14736-o_1b8ol45kt1pnfp74d2cl0p14v314-uid-441319.png.t.jpg" data-toggle="modal" data-target="#ex-screenshot-modal" onclick="$(&quot;#ex-screenshot-carousel&quot;).carousel(1);">
            <img src="http://image.coolapk.com/apk_image/2017/0212/via_screenshot3-for-14736-o_1b8ol45ktqhbfgo1u641j5v1s2g15-uid-441319.png.t.jpg" data-toggle="modal" data-target="#ex-screenshot-modal" onclick="$(&quot;#ex-screenshot-carousel&quot;).carousel(2);">
            <img src="http://image.coolapk.com/apk_image/2017/0212/via_screenshot4-for-14736-o_1b8ol45kt1si21va13981h6s3pp16-uid-441319.png.t.jpg" data-toggle="modal" data-target="#ex-screenshot-modal" onclick="$(&quot;#ex-screenshot-carousel&quot;).carousel(3);">
        </div>
    </body>
</html>
      查看全部 1 个回答
      推荐问题