当前位置：网站首页>PC side web page effects (client series, scroll series, immediate function execution, sidebar effects)

PC side web page effects (client series, scroll series, immediate function execution, sidebar effects)

2022-07-28 22:39:00 【Green hedgerow bamboo maple】

client Is the client ,client The series attribute obtains the information about the visible area of the element , adopt client Related properties of series , You can dynamically get the border size of this element , Element size, etc

client Series properties describe
element.clientTop Returns the size of the top border of the element
element.clientLeft Returns the size of the left border of the element
element.clientWidth The return element itself includes padding, The width of the content area , No borders , Return value without unit
element.clientHeight The return element itself includes padding, Height of content area , No borders , Return value without unit 
  <style>
    div {
      position: absolute;
      width: 300px;
      height: 300px;
      background-color: pink;
      top: 30px;
      padding: 80px;
      border: 5px solid red;

    }
  </style>
<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    console.log(div.clientLeft);//5
    console.log(div.clientTop);//5
    console.log(div.clientHeight);//300
    console.log(div.clientWidth);//300
  </script>
</body>

Immediate execution function , Used to create a separate scope , Execute directly without calling 

(function(){})()
// perhaps 
(function(){}())
<body>
  <script>
    (function () {
      alert(' Immediate execution function ')
    })();
    // The ginseng 
    (function (a) {
      console.log(a);
    })(3);//3
    // Immediately execute semicolon separation between functions 
    (function (a) {
      console.log(a)
    }(8))//8
    // Immediate execution functions are all in separate scopes , There will be no variable name conflicts 
  </script>
</body>

Element scrolling scroll series

You can dynamically get the size and rolling distance of elements

scroll Series properties effect
element.scrollTop Returns the distance from the upper side that was rolled away , Return value without unit
element.scrollLeft Return the left distance rolled away , Return value without unit
element.scrollWidth Returns its actual width , No borders , Return value without unit
element.scrollHeight Return to your actual height , No borders , Return value without unit

The head of the page being rolled away

If the browser height or width is not enough to display the entire page , The scroll bar will appear automatically , When the scroll bar scrolls down , The height hidden above the page is the height rolled up , The scroll bar will trigger when scrolling onscroll event 

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      border: 4px solid blue;
      font-size: 100px;
      overflow: auto;
    }
  </style>
<body>
  <div>
    ggggggggggg<br />ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
  <script>
    var div = document.querySelector('div');
    console.log(div.scrollWidth);
    console.log(div.scrollHeight);
    div.addEventListener('scroll', function () {
      console.log(div.scrollTop);
      console.log(div.scrollLeft);
    })
  </script>
</body>

Imitate Taobao to fix the right sidebar

1. The original sidebar was absolute positioning

2. When the page scrolls to a certain position , The sidebar becomes fixed

3. The page continues to scroll , It will show back to the top

4. Pages use scrolling events scroll, Scrolling to a certain position is to judge the upper value of the page being rolled , The curled header on the page can be passed window.pageYOffset get , If it's the rolled left side window.pageXOffset

5. Be careful ： The head of the element rolled away is used element.scrollTop, If the header of the page is rolled away, it is window.pageYOffset

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

    .w {
      width: 1000px;
      margin: 0 auto;
    }

    .slide-bar {

      position: absolute;
      top: 600px;
      /* left: 1600px; */
      right: 0;
      width: 100px;
      height: 200px;
      background-color: skyblue;
    }

    .goBack {
      display: none;
      position: absolute;
      bottom: 0;
      width: 100px;
      height: 50px;
      background-color: orange;
      margin-bottom: 0;
    }

    .header,
    .banner,
    .content,
    .main {
      /* width: 100%; */
      height: 500px;
      margin-top: 20px;

    }

    .header {
      background-color: blue;
    }

    .banner {
      background-color: pink;
    }

    .content {
      background-color: yellow;
    }

    .main {
      background-color: red;
    }
  </style>
  <div class="slide-bar">
    <span class="goBack"> Return to the top </span>
  </div>
  <div class="header w"> Head </div>
  <div class="banner w">banner</div>
  <div class="content w"> Content </div>
  <div class="main w"> The main body </div>
<script>
    var slidebar = document.querySelector('.slide-bar');
    var banner = document.querySelector('.banner');
    // prevent slidebar There's a jump 
    var bannerTop = banner.offsetTop;
    // The value that should change after the sidebar is fixed and positioned 
    var slidebarTop = slidebar.offsetTop - bannerTop;
    var content = document.querySelector('.content');
    var goBack = document.querySelector('.goBack');
    var contentTop = content.offsetTop;
    document.addEventListener('scroll', function () {
      // console.log(window.pageYOffset); The head of the page being rolled away 
      // console.log(banner.offsetTop);
      if (window.pageYOffset > bannerTop) {
        slidebar.style.position = 'fixed';
        slidebar.style.top = slidebarTop + 'px';
      } else {
        slidebar.style.position = 'absolute';
        slidebar.style.top = '600px';
      }
      if (window.pageYOffset >= contentTop) {
        goBack.style.display = 'block';
      } else {
        goBack.style.display = 'none';
      }
    })
  </script>

mouseover And mouseenter The difference between

mouseover The mouse will trigger when it passes through its own box , After the subbox, it will trigger ,mouseenter It's only triggered by its own box 

<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    var father = document.querySelector('.father');
    father.addEventListener('mouseover', function () {
      console.log('aaaa');
    })
    father.addEventListener('mouseenter', function () {
      console.log('bbbb');
    })
  </script>
</body>

原网站

版权声明
本文为[Green hedgerow bamboo maple]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130601354769.html

边栏推荐

猜你喜欢

随机推荐