关于【div添加滚动条】，如何给DIV添加滚动条，今天涌涌小编给您分享一下，如果对您有所帮助别忘了关注本站哦。

1、带你手写一个轮播图之JavaScript逻辑实现

为了控制篇幅，本打算分3篇文章来讲述轮播图实现的，后来想了想，JS代码量其实很少，完全没必要，所以这篇文章就是收尾。

昨天，我们完成了结构和布局设计，今天我们来完成JavaScript逻辑部分。我这人比较有代码洁癖，不喜欢过多的变量污染全局作用域，习惯使用自执行的匿名函数包裹一个功能块。我们所有的JS代码都在如下函数内部编写：

(function () { // ... ... 我们的代码都写到这儿})();

我们的程序中需要用到多个DOM元素，所以我们先拿到它们的引用存储到变量中。

/** @type {HTMLDivElement} 轮播图容器 */ const carouselWrapper = document.querySelector('.carousel-wrapper') /** @type {HTMLUListElement} banner列表元素 */ const slides = carouselWrapper.querySelector('.slides') /** @type {HTMLDivElement} 指示器 */ const indicator = carouselWrapper.querySelector('.indicators') /** @type {NodeListOf<HTMLLIElement>} 指示器节点列表 */ const indicatorItems = indicator.querySelectorAll('.indicator-item') /** @type {HTMLUListElement} 导航按钮列表元素 */ const nav = carouselWrapper.querySelector('.nav')

接下来，我们定义一些常量和变量，建议大家定义常量名使用全大写字母下划线分割。

/** 活动类名 */ const ACTIVE_CLS_NAME = 'active' /** 左导航按钮类名 */ const CLS_NAME_NAV_LEFT = 'nav-left' /** 右导航按钮类名 */ const CLS_NAME_NAV_RIGHT = 'nav-right' /** 取消过渡的类名 */ const CLS_NAME_NO_TRANSITION = 'no-transition' /** 定时器间隔 */ const TIMER_DELAY = 3000 /** 定时器id */ let timerId /** 当前指示器索引 */ let currentIndex = 0 /** 当前banner索引 */ let currentslideItemIndex = 0 /** 过渡结束标识 */ let transitionendFlag = true

要做到左右滚动的无缝切换，我们必须至少拷贝banner列表中的第一和最后一个元素，将其追加到banner列表尾部，并更新banner列表的宽度。为了节省代码，我完全拷贝了一份banner列表的子元素。我们用一个函数来做这件事，代码如下：

function updateSlides() { slides.innerHTML += slides.innerHTML slides.style.width = `${slides.childElementCount * 100}%` }

当用户单击指示器项的时候，我们需要切换当前显示的banner图。首先需要确定被单击指示器项的索引。我们用一个函数来实现，代码如下：

function getTargetIndex(el) { for (let i = 0, len = indicatorItems.length; i < len; i++) { if (indicatorItems[i] === el) { return i } } return -1 }

索引确定了，我们需要根据索引来更新X轴的平移值。当然，要实现左右滚动，我们还有其它实现方案，例如：改变可滚动元素的滚动条位置，改变元素的左右定位等。那么，为什么使用3D平移变换呢？原因之一就是，浏览器会对3D平移变换开启GPU硬件加速渲染，以获得更好的性能，直观感受就是动画非常丝滑，毫无拖泥带水之感。我们用一个函数来更新X轴平移，代码如下：

function updateTranslateX(index, targetIndex = -1) { // 如果过渡没有结束，直接返回 if (!transitionendFlag) return // 当前指示器移除活动类 indicatorItems[currentIndex].classList.remove(ACTIVE_CLS_NAME) // 如果没有提供目标索引，就把index赋给它 if (targetIndex < 0) { targetIndex = index } // 目标指示器添加活动类 indicatorItems[targetIndex].classList.add(ACTIVE_CLS_NAME) // 将当前索引设为目标索引 currentIndex = targetIndex // 将当前banner索引设为index currentslideItemIndex = index // 改变banner列表元素的X轴平移变换 slides.style.transform = `translateX(-${index / slides.childElementCount * 100}%)` }

以下是指示器单击处理函数的实现。这个代码很简单，首先获取目标指示器项的索引，如果找到了，就根据该索引更新banner列表的X轴平移。

/** @param {MouseEvent} e */ function indicatorClickHandler(e) { const index = getTargetIndex(e.target) index >= 0 && updateTranslateX(index) }

接下来，我们实现左右导航按钮的单击。首先，我们需要一个向左和向右滚动的函数，代码如下：

function toNext() { // 指示器项的数量 const len = indicatorItems.length if (currentIndex < len) { if (currentIndex === len - 1) { // 继续滚动到下一个索引位置，并将目标索引设为0 updateTranslateX(currentIndex + 1, 0) } else { updateTranslateX(currentIndex + 1) } } else { updateTranslateX(0) } } function toPrev() { const len = indicatorItems.length if (currentIndex < 1) { // 去掉过渡 slides.classList.add(CLS_NAME_NO_TRANSITION) // 让索引为len的banner图可见 updateTranslateX(len, len - 1) setTimeout(() => { // 添加过渡 slides.classList.remove(CLS_NAME_NO_TRANSITION) // 让索引为len-1的banner图可见，此时有过渡 updateTranslateX(len - 1) }, 0) } else { updateTranslateX(currentIndex - 1) } }

以下是左右导航按钮单击事件处理函数的实现。我们根据是否包含指定的类名，来判断单击的哪个按钮，进而执行不同的导航函数。

/** @param {MouseEvent} e */ function navClickHandler(e) { /** @type {{target: HTMLElement}} */ const { target } = e if (target.classList.contains(CLS_NAME_NAV_RIGHT)) { toNext() } else if (target.classList.contains(CLS_NAME_NAV_LEFT)) { toPrev() } }

我们还需要监听banner列表的过渡开始和结束事件。过渡开始事件处理函数非常简单，只是将过渡结束标志设为了false，代码如下：

function slidesTransitionstartHandler(e) { transitionendFlag = false }

下面是过渡结束事件处理函数定义，其实也很简单。

function slidesTransitionendHandler(e) { transitionendFlag = true if (currentslideItemIndex >= indicatorItems.length) { // 取消过渡 slides.classList.add(CLS_NAME_NO_TRANSITION) updateTranslateX(0) setTimeout(() => { // 再添加回过渡 slides.classList.remove(CLS_NAME_NO_TRANSITION) }, 0) } }

我们还需要让轮播图可以间隔一定时间自动切换。所以，我们需要实现开始和结束定时器的函数。这两个函数非常简单，代码如下：

function startTimer() { timerId = setInterval(toNext, TIMER_DELAY) } function stopTimer() { clearInterval(timerId) timerId = null }

现在，是时候让我们的轮播图动起来了。我们首先调用更新banner列表函数，然后开始定时器，最后注册事件监听器。

2、如何给DIV添加滚动条

如何给DIV添加滚动条

首先你必须要给div3设置一个宽高。然后再设置 #div3{overflow:auto;} 当内容溢出时显示滚动条。

如何给div层加滚动条

怎么样在div+css中设置一个div的框并出现滚动条

.div{

    width:100%;

    height:200px;

    overflow-x:hidden;

    overflow-y:auto;

}

.div{

    scrollbar-face-color: #20a774;

    scrollbar-shadow-color: #20a774;

    scrollbar-track-color: #ccc;

    scrollbar-arrow-color: #ddd;

}

.div::-webkit-scrollbar-track

{

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

background-color: #ccc;

}

.div::-webkit-scrollbar

{

width: 6px;

background-color: #ccc;

}

.div::-webkit-scrollbar-thumb

{

background-color: #20a774;

}当div内的内容超过200px时才会显示滚动条，下边的代码是对滚动条的优化，希望对你有帮助。

本文关键词：怎么给div加滚动条，div增加横向滚动条，div 添加滚动条，div滚动到指定位置，如何给div添加滚动条框。这就是关于《div添加滚动条，如何给DIV添加滚动条（带你手写一个轮播图之JavaScript逻辑实现）》的所有内容，希望对您能有所帮助！更多的知识请继续关注《犇涌向乾》百科知识网站：http://www.029ztxx.com！