All geek questions in one place

HTML / CSS scrolling issue on mouseover

To solve this problem, any type of help is important: -

  • In this, the overflow is initially hidden, and mouse over the table overflow.
  • But in the chrome browser, the cursor on the scroll bar flickers / blinks.

.one-scroll {
  max-height: 160px;
  max-width: 450px;
  background: #f7f7f7;
  position: relative;
  z-index: 100 !important;
}
.one-scroll.table-scrollable {
  overflow-x: hidden;
  overflow-y: hidden;
}
.one-scroll.table-scrollable:hover {
  overflow-x: auto;
  overflow-y: auto;
  z-index: 100 !important;
  }
<!Doctype html>
<html>
<head>
<style></style>
</head>
<body>
<br/>
<br/>
<section class="one-scroll table-scrollable">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Select Module</th>
        <th>Select Fields</th>
        <th>Select Operators</th>
        <th>Select Vaue</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
    </tbody>
  </table>
</section>
</body>
</html>
Run codeHide result
+4
source share
3 answers

Looks like a known issue with Chrome 56.

You can fix this by adding these css rules and customizing them according to your design:

*::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important;
}
*::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
}
+2
source

Are you sure? this looks good to me:

HTML

<h2>Hover it</h2>
<div class="scrollbox">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

CSS

.scrollbox {
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
  visibility: visible;
}

http://codepen.io/kizu/pen/OyzGXY `

0
source

JavaScript.

CSS

 .scroll { overflow: auto; }
 .noscroll { overflow: hidden; }

JavaScript:

function setScroll(elem) {
    elem.classList.remove("noscroll");
    elem.classList.remove("scroll");
    elem.className += " scroll";
}

function setNoScroll(elem) {
    elem.classList.remove("noscroll");
    elem.classList.remove("scroll");
    elem.className += " noscroll";
}

HTML:

<section class="scrollbox noscroll"
    onmouseover="setScroll(this);" 
    onmouseout="setNoScroll(this);">

. CodePen

0

Source: https://habr.com/ru/post/1671340/

More articles:


All Articles