CODEWITHSUNDEEP
htmlcsscross-browser
Pushkar Adhikari
Pushkar Adhikari

Reputation: 220

HTML/CSS scrollbar issue on mouse hover

Any type of Help is appreciate for resolving this issue:-

.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>

Upvotes: 5

Views: 2881

Answers (3)

jim31415
jim31415

Reputation: 8808

This can work with a little bit of 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);">

see CodePen

Upvotes: 0

Radu Onisor
Radu Onisor

Reputation: 23

are you sure ? it looks good to me:

THE 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>

THE CSS

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

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

Upvotes: 1

Stefano Zanini
Stefano Zanini

Reputation: 5916

Seems like a known issue with Chrome 56.

You can fix it by adding these css rules and tweaking them to suit your design:

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

Upvotes: 4

Related Questions