第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

自動(dòng)居中水平滾動(dòng)條

自動(dòng)居中水平滾動(dòng)條

四季花海 2022-12-09 15:14:56
我發(fā)現(xiàn)了一些相關(guān)案例，但沒(méi)有答案適合我。我的頁(yè)面有一個(gè)很大的水平圖像，但我需要從中間開(kāi)始滾動(dòng)（只是水平），始終以任何分辨率滾動(dòng)。var body = document.body; // For Safarivar html = document.documentElement; // Chrome, Firefox, IE and Opera body.scrollLeft = (html.clientWidth - body.scrollWidth) / 2html.scrollLeft = (html.clientWidth - body.scrollWidth) / 2body {  background-color: 0178fa;  padding: 0;  text-align: center;  display: flex;  justify-content: center;  align-items: center;  overflow: auto;}#page {  width: 100%;  height: 100%;  margin: 0 auto;  padding: 0;  display: block;}#wrap-landing {  position: relative;  margin: 0 auto;  padding: 0;  content: url(https://i.imgur.com/gb6EyHk.png);  width: 1920px;  height: 1080px;}<div id="page">  <div id="wrap-landing"></div></div>
查看完整描述

2 回答

?
犯罪嫌疑人X

TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以使用標(biāo)準(zhǔn)的 javascript：window.scroll(x, y)。

前任：


window.addEventListener('load', function() {

  setTimeout(function() {

    window.scroll(x, y);

  },1)

})

x-coord是要在左上角顯示的沿文檔水平軸的像素。


y-coord是要在左上角顯示的沿文檔垂直軸的像素。


window.addEventListener('load', function() {

  setTimeout(function() {

    window.scroll(screen.width/2, 0);

  },1)

})

body{

    background-color:0178fa;

  padding:0;

  text-align:center;

    display: flex;

  justify-content: center;

  align-items: center;

    overflow:auto;

}


#page {

    width:100%;

    height:100%;

    margin:0 auto;

  padding:0;

    display:block;

}



#wrap-landing{

    position:relative;

    margin:0 auto;

  padding:0;

    content:url(https://i.imgur.com/gb6EyHk.png);

    width:1920px;

    height:1080px;


}

<!DOCTYPE html>

<html>

<head>

  <title></title>

</head>

<body>

  <div id="page">

    <div id="wrap-landing">

    </div>

  </div>

</body>

</html>


查看完整回答
反對(duì) 回復(fù) 2022-12-09
?
海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊

數(shù)學(xué)是：


centerX = (el.scrollWidth - el.clientWidth) / 2

可滾動(dòng)#page元素的示例：


const el = (sel, par) => (par || document).querySelector(sel);


const elPage = el("#page");

const centerX = (elPage.scrollWidth - elPage.clientWidth) / 2;

const centerY = (elPage.scrollHeight - elPage.clientHeight) / 2;

elPage.scrollTo(centerX, centerY);

#page {

  display: flex;

  overflow: scroll; 

  height: 200px;

}


#image {

  flex: 0 0 auto;

  margin: auto;

  content: url(https://i.imgur.com/gb6EyHk.png);

  width: 1920px;

  height: 1080px;

}


/*

PS: flex and margin:auto is used to center 

#image in case is smaller than the parent.

*/

<div id="page">

  <div id="image"></div>

</div>


查看完整回答
反對(duì) 回復(fù) 2022-12-09
  • 2 回答
  • 0 關(guān)注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)