企业网站中的横向滚动的实现

做企业网站的时候，经常能碰到这样的情况：在某个区域显示供应商或者是合作伙伴的图标，以显示公司的可靠性。

滚动显示合作伙伴

效果如上图显示，两边的黄线是为了突出显示，实际应用中请自己设置。

如何实现的呢？

1、自己写jquery或者javascript实现，当然可以。不建议这样做（大神除外），当然如果发生兼容性问题的时候，不得不自己写。

2、使用现成的插件实现，好多；今天我们就用一款国外比较流行的插件：owl.carousel.min.js来实现。

下面是具体的步骤：

首先：HTML代码：

⑴，依次引入jquery库和owl.carousel.min.js插件；见下图：

引入jquery库和owl.carousel.min.js

⑵依次引入owl.carousel.min.css和支持的皮肤css

引入owl.carousel.min.css

⑶书写结构：

html结构

⑷书写owl.carousel.min.js参数，如下图：

书写参数

⑸书写css文件，注意，这是包裹的容器，而不是插件本身的css，如果需要修改插件本身的css，请修改owl.carousel.css。见下图：

css样式

这样，就搞定了，如第一张动图的效果，如果自己定制一些样式，和滚动选项就需要花一点时间来研究了。

号外，如果需要详细的参数说明，请在评论区留言，我会再写一篇文章来说明的。

看个锚点定位的例子

发现页面唰的一些就到顶部了，快到我们懵逼了。。。

开始解决

scroll-behavior

CSS属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

scroll-behavior:smooth 写在滚动容器元素上，可以让容器的滚动变得平滑。

在网页默认滚动是在<html>标签上，移动端大多数在<body>标签上。

我们可以这样加：

html, 
body { scroll-behavior:smooth; }

加了以后的效果如下：

这是录制的GIF图，效果没那么好。大家可以动手试一下，滑动体验非常不错。

缺点

兼容性不够好

当然我们可以通过js来做个类似

Element.scrollIntoView() 方法

DOM元素的scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内，通过触发滚动容器的定位实现。

DOM元素的scrollIntoView()方法是原生JS 兼容到IE6，兼容性非常好。

参数如下

{
 behavior: "auto" | "instant" | "smooth", // 默认 auto
 block: "start" | "center" | "end" | "nearest", // 默认 center
 inline: "start" | "center" | "end" | "nearest", // 默认 nearest
}

解释一下这三个参数：

behavior 表示滚动方式。auto 表示使用当前元素的 scroll-behavior 样式。instant 和 smooth 表示直接滚到底和使用平滑滚动。
block 表示块级元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是竖直方向。start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end 表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
inline 表示行内元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是水平方向。其值与 block 类似。

用法：

html:

<div class="wrap">
 <div onClick="onScrollIntoView()">点击让黑色块到顶部</div>
 <ul class="body">
 <li>1</li>
 <li>2</li>
 <li id="box">我是黑色</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>

js:

function onScrollIntoView () {
 var element = document.getElementById("box");
 element.scrollIntoView({behavior: "smooth"});
}

效果：

这回大家再也不用害怕做锚点定位啦。

最后我们在说一个关于页面滚动问题吧，那就是 返回顶部 功能实现

返回顶部功能实现

我们常用定时器 setInterval 来不断减去高度。

如：当前距离顶部 1000，我们每10毫秒减50，

var timer = setInterval(function() { // 定时器 每10毫秒执行一次
 // 顶部距离 document.body.scrollTop = 1000 
 var speed = 50 // 返回顶部速度 
 document.body.scrollTop = document.body.scrollTop - speed
 if (document.body.scrollTop === 0) { // 返回到达顶部后， 销毁定时器
 clearInterval(timer)
 }
}, 10)

效果：

大家会发现，页面返回是滚动起来很干。没10毫秒减50. 很平均，在交互上效果并不好。

借鉴上面 scroll-behavior:smooth 的交互效果。缓动的返回顶部。

改一下计算方式：1000/2 = 500, 500/2 =250, 250/2 = ...... 这样滑动起来是不是就平滑了呢？

换算成公式：开始位置 = 开始位置 + (结束位置 - 开始位置) / 速度

document.body.scrollTop = 1000 + (0 - 1000) / 2

公式太烦了还是上代码吧：

var onTop = function (a, b, c, d) {
 if (a == b || typeof a != 'number') {
 return
 }
 b = b || 0
 c = c || 2
 
 var speed = function () {
 a = a + (b - b) / c
 
 if (a < 1) {
 d(b, true)
 return
 }
 d(a, false)
 requestAnimationFrame(speed)
 }
 speed()
}

a 开始位置
b 结束位置
c 速度
d 位置回调，d(当前的位置值, 否动画结束)

调用：

var target = document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
 target.scrollTop = value
})

效果：

Ps: gif录制效果不好，大家可以动手写一下DEMO

多朋友，会觉得默认的css滚动条样式是很丑的吧，稍微改下-webkit-scrollbar（滚动条整体样式）、-webkit-scrollbar-thumb（滚动条里面小方块样式）、-webkit-scrollbar-track（滚动条里面轨道样式）就ok了，要改什么样的就改什么样的css滚动条。

改默认css滚动条样式，例子代码如下：

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>css滚动条样式</title>
<style type="text/css">
.box{
width: 600px;
height: 400px;
margin: 100px auto;
border: 1px solid #000;
border-right: 0;
}
.main{
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: 16px;
height: 100%;
}
.main p{height:300px;}
/*-------滚动条整体样式----*/
.main::-webkit-scrollbar {
width:8px;
height:8px;
}
/*滚动条里面小方块样式*/
.main::-webkit-scrollbar-thumb {
border-radius:100px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:red;
}
/*滚动条里面轨道样式*/
.main::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="box">
<div class="main">
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
</div>
</div>
</body>
</html>

效果图：

特别注意：

实现单个div里面的内容滚动，必需满足以下3个条件：

1、div必须设定固定的高度，不能使用百分比或 auto 等弹性值；

2、其中的内容高度必须超过它本身的高度；

3、必需要添加这个overflow:auto属性。

附：

overflow的属性和不同值得作用

1.overflow:visible;不剪切内容也不添加滚动条。默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示;

2.overflow:auto;在需要时剪切内容并添加滚动条;

3.overflow:hidden;不显示超过对象高度的内容;

4.overflow:scroll;总是显示纵向滚动条;

5.overflow 水平及垂直方向内容溢出时的设置;

6.overflow-x 水平方向内容溢出时的设置;

7.overflow-y 垂直方向内容溢出时的设置。

原文地址：http://tangjiusheng.com/divcss/159.html

在线咨询

上一篇：安全研究人员警告“HTML以纯文本形式存储密码”的危险性
下一篇：IE如何兼容html5

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

企业网站中的横向滚动的实现

scroll-behavior

缺点

Element.scrollIntoView() 方法

返回顶部 功能实现

您的项目需求

返回顶部功能实现