企業網站中的橫向滾動的實現

做企業網站的時候，經常能碰到這樣的情況：在某個區域顯示供應商或者是合作伙伴的圖標，以顯示公司的可靠性。

滾動顯示合作伙伴

效果如上圖顯示，兩邊的黃線是為了突出顯示，實際應用中請自己設置。

如何實現的呢？

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() 方法

返回頂部 功能實現

您的項目需求

返回頂部功能實現