移动端横向商品浏览、横向滑动广告位(CSS实现)

在手机上逛一些电商网站或者其他相同类型的网站时，会遇到横向滑动的商品。如京东、淘宝等电商网站下。我们知道，这一般情况下为某个元素设置overflow: auto做到，表示横向或者竖向依据内容的多少自动出现滚动条。但是，在页面中间出现横向滚动条是十分不好看的..

在不使用任何插件的情况下，可以使用原生CSS的方法来解决这个问题。

-webkit-scrollbar

移动端webkit内核的浏览器可以使用自定义滚动条的伪对象选择器::-webkit-scrllbar。这同::after, ::before差不多。但是-webkit-scrollbar存在浏览器兼容性问题。

有兴趣的可以看看以下两篇文章，看看对其的介绍

Styling Scrollbars

Custom Scrollbars in WebKit

使用方法： .selector::-webkit-scrollbar { display: none }

overflow-x

当然，同样使用overflow方法来解决，但是需要一点小技巧。思路如下。

父元素设置overflow:hidden属性，可以设置高度，也可以不设置高度，具体还是要看具体实现的场景。这里需要明白的一点是，在没有overflow: hidden属性下，当子元素的高度超过父元素的高度时，父元素的高度会被子元素撑高；在设置了overflow: hidden属性的情况下，当子元素的高度超过父元素的高度时，超过的部分会被剪裁掉。如果有不理解的,就再多读几次..因为此方法就是利用这个原理
子元素设置高度，并且高度要大于父元素的高度。同时设置overflow-x: auto; white-space: nowrap;也就是说，需要设置三个属性：

height: 110%  (大于父元素的高度，百分比是基于父元素的高度设置的)
overflow-x: auto (横线滑动的广告)
white-space: nowrap;  (不换行)

上面我们说到，父元素设置的overflow属性会把超过的部分剪裁掉。而在子元素中，由于实际内容的宽度是大于移动设备的宽度的，因此此时必须产生横向滚动条。由于子元素的高度大于父元素的高度，超过父元素的高度的内容被剪裁。因此，子元素的滚动条就被剪裁掉了。同时也不会影响其他内容的显示。IE9及以上的浏览器都支持。

使用这种原生CSS的方式而不引入插件的好处在于CSS文件大小变小了，用户体验也好了。具体如下。

html
<div class="outer"><div class="inner"><div class="content">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div></div>
</div>
css
.outer {height: 300px;        // 也可以不设置高度，让高度自适应内容的变化overflow: hidden;
}
.inner {height: 110%;   // 高度实际为 300 * 110% = 330pxoverflow-x: auto;white-space: nowrap;.content {display: inline-block;width: 100px;height: 100%;background-color: lightblue;margin-right: 10px;&:last-of-type {margin-right: 0;}}
}

转载于:https://www.cnblogs.com/taohuaya/p/9939910.html

移动端去除横向滚动条相关推荐

HTML去除横向滚动条
<style>.layui-layer-content{overflow-x: hidden !important;} </style> 通常在DIV样式中加入后刷新页面即可: ...
js 实现pc端鼠标拖动触发横向滚动条的滚动（隐藏的滚动条）
如果您想插件实现,如下链接:better-scroll better-scroll | :scroll: inspired by iscroll, and it supports more featu ...
python prettytable表格列数太多_html table表格列数太多添加横向滚动条
HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...
css如何设置x轴为滚动,解决移动端页面出现 X轴横向滚动条问题
最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站,写完后发现 WAP 端总是会出现横向滚动条,也就是 X 轴滚动条,导致 WAP 端页面左右滑来滑去,很是令人蛋疼,即使设置了 ...
移动端使用iframe嵌套页面 scrolling:auto，ios出现横向滚动条问题
移动端使用iframe嵌套页面 scrolling:auto,ios出现横向滚动条问题一.业务需求/及问题点业务需求:开发移动端项目时,在项目网页内引用第三方网页,为此采用<iframe s ...
html iframe禁止横向滑动_iframe横向滚动条显示
去掉iframe横向滚动条我做的页面比较小,可包含页面相对高些,怎样只看到纵向的而去掉横向的? 让竖条没有: 让横条没有: 两个都去掉?更简单了各位高手希望帮帮忙,出现横向滚动条时什么原因,我是用 ...
datatable无法设置横向滚动条(设置无效)
datatable设置横向滚动条无效 js如下: 页面如下: 设置 scrollx 属性为true时,还需在 table 添加 style="white-space: nowrap; &qu ...
html页面不显示横向滚动条,css横向滚动条不显示？
在html页面开发时,我们经常会使用到css来设置页面的样式,当页面出现横向滚动条时,用css怎么将其清除掉?下面我们来看一下css设置横向滚动条不显示的方法. css可以通过为元素添加overflo ...
干死该死的横向滚动条
一.情景描述开发者小蒋按照1920*1080的分辨率进行开发,他写的所有元素的宽度都没有超过1920,但是却出现横向滚动条,小蒋百思不得其解,最终求教程序员大尤. 可能的问题原因: 任务栏左置,实际 ...

移动端去除横向滚动条

移动端横向商品浏览、横向滑动广告位(CSS实现)

-webkit-scrollbar

overflow-x

移动端去除横向滚动条相关推荐

最新文章

热门文章