css中scroll属性

css属性scroll-snap-type

/* 不吸附 */
scroll-snap-type: none;

/* 表示吸附轴的关键字 */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* 表示吸附程度的可选关键字 */
/* mandatory 或 proximity */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* 全局值 */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: revert;
scroll-snap-type: revert-layer;
scroll-snap-type: unset;

css 之scroll-behavior属性：滚动框指定滚动行为

Danna123

scroll-behavior:auto; // 滚动条立即滚动

scroll-behavior:smooth; // 窗口平稳滚动

scroll-behavior:inherit;

scroll-behavior:initial;

scroll-behavior:unset;

css overflow scroll IOS 出现空白 css中overflow是什么

mob64ca1408d5ff

overflow test

用css修改scroll样式

Danna123

.topnav_box::-webkit-scrollbar    //滚动条整体部分

{  
    width: 5px;  
    height:10px;     

   background-color:#b5b1b1;

}  
.topnav_box::-webkit-scrollbar-track       //scroll轨道背景
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px; 
      background-color:black;    

}




.topnav_box::-webkit-scrollbar-thumb  滚动条中能上下移动的小块
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
   background-color:#b5b1b1;
}

css imemode属性 css中item

mob6454cc76bc4a

<div>
    <div>租辆酷车</div>
    <div>css教学</div>
</div>
<div>
    <div>
        <div>中关村到天安门</div>
        <div>价格: 120元</div>
    </div>
    <div>
        <div>陆家嘴到迪士尼</div>
        <div>价格: 50元</div>
    </div>
    <div>
        <div>天河体育中心到广州塔</div>
        <div>价格: 80元</div>
    </div>
</div>

css中clip属性

mob604757037cf3

<div class="wrap">
    <img class="lake" src="../img/lake.jpg">
</div>

CSS中transform 属性

多多哇

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

Splash scroll_position 属性

mb5fe18fab305a5

function main(splash, args)
  assert(splash:go('https://www.baidu.com/'))
  splash.scroll_position = {y=400}
  return splash:png()
end

css ios 设置 scroll 不回弹

mob649e815375e5

.noscroll {
  overscroll-behavior: none;
}

javafx CSS属性 java中css文件

mob6454cc67e023

p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
 
<p class=”pclass_1”>P标签样式</p><p class=”pclass_2”>P标签样式</p>

CSS中background属性详解

mb5ffd6eef9281a

div
{
background-color:yellow;
background-clip:content-box; }

css中背景属性核心

陈业贵的博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div
        {
        	width: 500px;
        	height: 500px;
       	}
       	.box1
       	{
       		background-color: red;
       	}
       	.box2
       	{
       		background-color: rgb(0,255,0);
       	}
       	.box3
       	{
       		background-color: rgba(0,0,255,1);
       	}
       	.box4
       	{
       		background-color: #0ff;
       	}
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

scroll系列的属性 js 230218

ifubing

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: yellow;
            overflow: auto;
            position: absolute;
            left: 100px;
            top: 200px;
        }
    </style>

    <script>
        window.onload = function () {
            // 定义变量
            var ele_div = document.querySelector("div")

            // 事件绑定
            ele_div.onscroll = div_srcoll

            // 事件详情
            function div_srcoll() {
                // 输出被卷走的数据
                var top = this.scrollTop
                var left = this.scrollLeft
                console.log(top, left)
            }
        }
    </script>

</head>
<body>


<div>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
    <p>
        <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span><span>09</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span>
    </p>
</div>


</body>
</html>

css平滑滚动 scroll-behavior: smooth；

wx58f59a601fad5

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>锚点平滑跳转</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    nav {
      width: 50%;
      height: 50px;
      text-align: center;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      background: green;
    }

    nav a {
      display: inline-block;
      line-height: 50px;
      color: #FFF;
      text-decoration: none;
      padding: 0 30px;
    }


    .box {
      width: 100%;
      text-align: center;
      font-size: 30px;
      color: #FFF;
    }

    #box1 {
      background: #d00;
    }

    #box2 {
      background: #42a4ff;
    }

    #box3 {
      background: #008080;
    }

    #to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      background: #ccc;
      color: #666;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <nav>
    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <a href="#box3">box3</a>
  </nav>

  <div id="box1" class=" box">box1</div>
  <div id="box2" class=" box">box2</div>
  <div id="box3" class=" box">box3</div>

  <div id="to-top">回到顶部</div>

  <script>
    onload = function () {
      const _Height = document.documentElement.clientHeight;
      const Box = document.getElementsByClassName('box');

      for (var i = 0; i < Box.length; i++) {
        Box[i].style.height = _Height + 'px'
        Box[i].style.lineHeight = _Height + 'px'
      }

      document.querySelector('#to-top').onclick = function (el) {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
    }
  </script>
</body>

</html>

javascipt CSS 属性 java中css是什么

mob64ca140761a4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式CSS</title>
    <!--
    <style>与</style>之间可以编写CSS代码，且每一行声明代码都用分号结尾；
    其语法格式为：
                <style>
                    选择器{
                        声明1;
                        声明2;
                        声明3;
                        ...
                    }
                </style>
    -->
    <!--内部样式-->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>内部样式CSS</h1>
</body>
</html>

css中的top jquery css中的padding属性

mob6454cc762e37

h1 {padding: 10px;}

CSS Scroll Snap 了解一下

精致码农

<div class='container'>
  <section class='child'>Section 1</section>
  <section class='child'>Section 2</section>
  <section class='child'>Section 3</section>
  ...
</div>

css：scroll-snap实现滚动贴合

彭世瑜

<style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 父容器 */
    .contaner {
      scroll-snap-type: y mandatory;
      height: 100vh;
      overflow: scroll;
    }

    .section {
      width: 100vw;
      height: 100vh;
      scroll-snap-align: start;
    }

    .section-1 {
      background-color: #cca4e3;
    }

    .section-2 {
      background-color: #1685a9;
    }

    .section-3 {
      background-color: #4b5cc4;
    }

    .section-4 {
      background-color: #8d4bbb;
    }
  </style>

  <div class="contaner">
    <div class="section section-1">1</div>
    <div class="section section-2">2</div>
    <div class="section section-3">3</div>
    <div class="section section-4">4</div>
  </div>

css：scroll-snap实现滚动贴合

彭世瑜

<style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 父容器 */
    .contaner {
      scroll-snap-type: y mandatory;
      height: 100vh;
      overflow: scroll;
    }

    .section {
      width: 100vw;
      height: 100vh;
      scroll-snap-align: start;
    }

    .section-1 {
      background-color: #cca4e3;
    }

    .section-2 {
      background-color: #1685a9;
    }

    .section-3 {
      background-color: #4b5cc4;
    }

    .section-4 {
      background-color: #8d4bbb;
    }
  </style>

  <div class="contaner">
    <div class="section section-1">1</div>
    <div class="section section-2">2</div>
    <div class="section section-3">3</div>
    <div class="section section-4">4</div>
  </div>

jQuery 添加 scroll 事件 jquery添加css

mob6454cc743894

jQuery 拥有可操作 HTML 元素和属性的强大方法

 一.  jQuery DOM（文档对象模型） 操作
   jQuery 提供一系列与 DOM （Document Object Model）相关的方法，访问和操作元素和属性变得很容易
   DOM 定义访问 HTML 和 XML 文档的标准

W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式

   获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
  获取属性 - attr()
  jQuery attr() 方法用于获取属性值


<body>

<p class="text">我是一个段落文本</p>
<p>我是一个p标签</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>



<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    // 返回p元素的文本内容<取值>
    // var text = $(".text").text();

    // 设置所有 p 元素的文本内容
    // var p = $("p").text("其实ta是个美女 ！");

    // 使用函数来设置所有匹配元素的文本内容
    $("p").text(function(i,h){
         return "这个 p 元素的 index 是：" + i+"========="+h;
    });
    

</script>

</body>

///

<body>
    <div>
        <p>
            中山学院Ming ！
        </p>
    </div>

    <div>我是Ming ！</div>
    <div>我是Ming 2</div>
    <div>我是Ming 3</div>
    <div>我是Ming 4</div>
    <div>我是Ming 5</div>
    <div>我是Ming 6</div>
    <div>我是Ming 7</div>
    <div>我是Ming 8</div>
    <div>我是Ming 9</div>
    <div>我是Ming 10</div>
    <div>我是Ming 11</div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    // 获取div元素中的 标签+文本
    // var html = $("div").html();
    // 获取div元素中的 文本
    // var text = $("div").text();
    
    // 设置div元素中的html内容
    //  $("div").html("<div >中山学院</div>");
    

    $("div").html(function(i,h){
        return "这是利用html()方法设置 div内容"+i+"-----------"+h;
    });



</script>

</body>


/


<body>

    <input type="text" class="items" value="请输入用户名..."/>
    <input type="text" class="items" value="Allen" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    
    // 获取文本框中的值
//    var val = $("input").val();
    
    // 设定文本框的值
//    $("input").val("ming");
    

    // 设定文本框的值
    $('input:text.items').val(function() {
         return this.value + ' ' + this.className;
    });


    // alert(val);

</script>

</body>

////


<body>

<img ming="太帅了" class="logo" src="http://soft.tanzhouedu.com/images/logo.png" alt="中山学院" width="215" height="66" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

    // 返回文档中所有图像的src属性值。
//    var val = $("img").attr("src");

    // 为所有图像设置src和alt属性(多个图片或属性)
    $("img").attr({src:"http://static.youku.com/index/img/header/yklogo.png",alt:"优酷",width:"140",height:"50"});

    // 为图片设置src属性
    $(".logo").attr("src","http://gtms01.alicdn.com/tps/i1/TB1.lRWGXXXXXblXpXXGI4UIXXX-250-100.gif");


</script>

</body>

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

css中scroll属性

css属性scroll-snap-type

css 之scroll-behavior属性：滚动框指定滚动行为

css overflow scroll IOS 出现空白 css中overflow是什么

用css修改scroll样式

css imemode属性 css中item

css中clip属性

CSS中transform 属性

Splash scroll_position 属性

css ios 设置 scroll 不回弹

javafx CSS属性 java中css文件

CSS中background属性详解

css中背景属性核心

scroll系列的属性 js 230218

css平滑滚动 scroll-behavior: smooth；

javascipt CSS 属性 java中css是什么

css中的top jquery css中的padding属性

CSS Scroll Snap 了解一下

css：scroll-snap实现滚动贴合

css：scroll-snap实现滚动贴合

jQuery 添加 scroll 事件 jquery添加css

css 平滑滚动 scroll-behavior: smooth

Scroll-View组件的scroll-x属性不起作用

jquery scroll事件结束触发 js中scroll

CSS——CSS字体样式属性和CSS外观属性

CSS中behavior属性语法

CSS中的定位——position属性

CSS 中哪些属性可以继承

CSS中content属性的妙用

CSS中float属性怎么用

理解CSS中的display属性

51CTO博客

css中scroll属性

css属性scroll-snap-type

css 之scroll-behavior属性：滚动框指定滚动行为

css overflow scroll IOS 出现空白 css中overflow是什么

用css修改scroll样式

css imemode属性 css中item

css中clip属性

CSS中transform 属性

Splash scroll_position 属性

css ios 设置 scroll 不回弹

javafx CSS属性 java中css文件

CSS中background属性详解

css中背景属性核心

scroll系列的属性 js 230218

css平滑滚动 scroll-behavior: smooth；

javascipt CSS 属性 java中css是什么

css中的top jquery css中的padding属性

CSS Scroll Snap 了解一下

css：scroll-snap实现滚动贴合

css：scroll-snap实现滚动贴合

jQuery 添加 scroll 事件 jquery添加css

css 平滑滚动 scroll-behavior: smooth

Scroll-View组件的scroll-x属性不起作用

jquery scroll事件 结束触发 js中scroll

CSS——CSS字体样式属性和CSS外观属性

CSS中behavior属性语法

CSS中的定位——position属性

CSS 中哪些属性可以继承

CSS中content属性的妙用

CSS中float属性怎么用

理解CSS中的display属性

jquery scroll事件结束触发 js中scroll