html 的scor属性,[HTML] 通过 scrollWidth 属性滚动内容

需求： 当内容超出div时，可以通过点击按钮横向滚动内容。

滚动条 - 点击滚动内容

div {

display: inline-block;

border: 1px solid red;

margin: 0 auto;

width: 300px;

overflow-x: scroll; /* 出现横滚动条 */

white-space: nowrap; /* 内容不换行 */

}

/* 隐藏滚动条 */

::-webkit-scrollbar {

width: 0;

background: transparent;

}

<

this is content1. this is content2. this is content3. this is content.this is content4.

>

显示各种宽度值

内容是否超出div

scrollWidth：内容实际宽度(不包滚动条等边线)

offsetWidth: div实际宽度 + border宽度 (包滚动条等边线)

clientWidth： div实际宽度，不包滚动条等边线

var leftBtn = document.querySelector('#left')

var rightBtn = document.querySelector('#right')

var container = document.querySelector('#container')

function showWidth() {

let container = document.querySelector('#container')

alert(

'scrollWidth:' +

container.scrollWidth +

', offsetWidth:' +

container.offsetWidth +

',clientWidth:' +

container.clientWidth

)

}

// element 是容器对象

function isOverflowing() {

var element = container

return element.scrollWidth > element.offsetWidth

}

leftBtn.onclick = function () {

container.scrollLeft -= 20

console.log('leftBtn clicked, scrollLeft value is: ' + container.scrollLeft)

}

rightBtn.onclick = function () {

container.scrollLeft += 20

console.log('leftBtn clicked, scrollLeft value is: ' + container.scrollLeft)

}