CSDN address

Github wrote two methods for demo, dot Star

Prerequisites, requirements:

Table using vue Element UIBecause the horizontal data is relatively long, the computer with small screen will have a horizontal scroll bar. If there are 20 data on each page, THEN I want to operate on the first data. I have to scroll to the bottom of the table, then pull the horizontal scroll bar to the right, then roll back to the top, and click on the operation at the end.

This operation is too complicated, so the following requirements are proposed: When the screen is too small and the horizontal scroll bar appears, fix the horizontal scroll bar of the table to the bottom of the screen. There is no way to implement element UI tables. I use window.onresize

Idea 1, handwritten scroll bar association table

1. Write a fixed scroll bar at the bottom, bind it to the scroll bar of the table, and hide the scroll bar of the table. 2. Use window.onresize to monitor the browser window to determine whether the scroll bar is hidden. 3. Calculate the sliding displacement distance and the corresponding proportion.

Get familiar with the idea of looking at the code

First, write a scroll bar and locate the event on the bottom binding, set the initialization parameters, the usefulness has been noted
	data(){
	return{
 		// Scroll bar parameters
      newx: "".// First coordinates
      oldx: "".// Move the coordinates
      outBoxWidth: "".// Scroll bar length
      moveWidth: "".// Movable length
      old_new: {
        // Scroll bar offset
        left: 0
      },
      windowWidth: document.body.clientWidth - 280./ / table width
      f: 0.leftstr:' '.// Scroll bar parameters}}Copy the code
<! -- Scroll bar -->//img is the small arrows at both ends<div class="out_box" ref="out_box"> <img style="margin-left:-20px; position:fixed; bottom:0px;" src="http://img.s.youfenba.com/material_thumb/74NGnHkeQs.png"> <div class="in_box" @mousedown="mouseDown" @mouseout=" mouseup ":style="old_new" ref="in_box" > < div> <img style="position:fixed; bottom:0px; right:40px;" src="http://img.s.youfenba.com/material_thumb/WTzsMr6RSX.png"> </div>Copy the code

I need to explain why I bind three mouseDown events: get the initial coordinates when the mouse clicks and offset the scrollbar based on how far the mouse moves. Mouseout: Stop calculating mouse coordinates when the mouse moves out of the scrollbar and the scrollbar stops scrolling. Mouseup: When the mouse is up, it stops calculating mouse coordinates and the scroll bar stops scrolling.

Set window.onresize to listen to the browser window
 mounted() {
    const that = this;
    window.onresize = function() {
      // Listen on the browser window
      that.ifmove();
    };
    this.ifmove();// check the page first
    }
Copy the code
 ifmove() {
      let that = this;
      that.windowWidth = document.body.clientWidth - 280;
      if (that.windowWidth < 1230) {
        that.$refs.out_box.style.display = "block";
        that.$refs.in_box.style.width =
          (that.windowWidth / 1230) * that.windowWidth + "px"; // The percentage of the display area is displayed in the scroll bar
        that.moveWidth = (1 - that.windowWidth / 1230) * that.windowWidth; // Moveable width
      } else {
        that.$refs.out_box.style.display = "none"; }},Copy the code
Iii. Calculation on a proportional basis

This step will be more complex, the principle is to scale the table scroll bar corresponding to the handwritten scroll bar, scroll bar drag offset, through the scale assignment to the table, complete the simulation of scrolling

  // Scroll bar events
    mouseDown(event) {
      let e = event || window.event;
      let _self = this;
      this.f = 1;
      this.newx = e.clientX;
      this.leftstr = this.old_new.left
      this.$refs.in_box.addEventListener("mousemove".function(event) {
        let e = event || window.event;
        _self.oldx = e.clientX;
        _self.moveWidth = (1 - _self.windowWidth / 1230) * _self.windowWidth-parseFloat(_self.leftstr); // Simulates the scrollbar's movable length
        if (_self.f) {
          _self.old_new.left =
            _self.oldx - _self.newx <= -parseFloat(_self.leftstr)
              ? "0px"
              : _self.oldx - _self.newx >= _self.moveWidth
                ? _self.moveWidth + parseFloat(_self.leftstr) + "px"
                : _self.oldx - _self.newx + parseFloat(_self.leftstr) + "px"; // Simulate the scrollbar offset
          _self.$refs.scroll.scrollLeft =
             _self.oldx - _self.newx <= -parseFloat(_self.leftstr)
              ? 0: _self.oldx - _self.newx >= _self.moveWidth ? (_self.moveWidth +parseFloat(_self.leftstr))* (1230 / _self.windowWidth)
                : (_self.oldx - _self.newx + parseFloat(_self.leftstr) ) * (1230 / _self.windowWidth); // The actual scroll bar offset}}); },mouseUp() {
      this.f = 0;
    },
Copy the code

Note: 1. The value 1230 here is the value of the scroll bar in table. 2. The length of the scroll bar written by the user is different from that of the table. Therefore, the scroll bar of the table cannot be moved based on the offset distance of the written scroll bar

Idea 2. Use CSS control

1. Div wraps the table. The entire div must be positioned in a visible window

.next-content {/* This step is required */ position: absolute; top: 0px; left: 210px; bottom: 0px; width: auto; right: 0px; overflow-y: auto; }Copy the code

2. Set the minimum width of the table and hide it beyond it to prevent the occurrence of two layers of scroll bars

.next-content-table {/* this step is required */ min-width: 1350px; overflow: hidden; }Copy the code

At present, method 2 has been widely used in projects to measure the optimal solution

Making written by two methods demo, little star:https://github.com/babybrotherzb/VUE-table-scroll