Question

我在<div>中有一个包含以下CSS属性的不同类型图片的html页面：

.images_container {
   position: relative;
   height: calc(100% - 200px);
   padding-top: 20px;
   overflow: auto;
   margin: auto;
}

目前正在显示页面滚动条，但我想仅在用户滚动页面时显示滚动条。这在CSS或JavaScript中是否可行？

Answer 1

如果您与元素scroll事件挂钩，您可以执行以下操作：将inner设置为width: 100%和padding-right: 20px。（填充权限值需要大于滚动条的宽度）

这会将滚动条推出视图，并在滚动时删除填充，初始化一个计时器，如果停止滚动则会重置填充

(function(timer) {
  window.addEventListener('load', function() {
    var el = document.querySelector('.inner');
    el.addEventListener('scroll', function(e) {
    (function(el){
      el.style.padding = '0';
      clearTimeout(timer);
      timer = setTimeout(function() {
        el.style.paddingRight = '20px';      
      }, 100);    
    })(el);
    })
  })
})();

.outer {
  height: 180px;
  width: 500px;
  border: 1px solid green;
  overflow: hidden;
}

.inner {
  width: 100%;
  height: 99%;
  overflow: auto;
  padding-right: 20px;
}

<div class="outer">
  <div class="inner">
    Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some
    content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some
    content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
  </div>
</div>

更新了，使用Element.classList切换了一个类，而不是内联样式，这可能是一种更推荐的方式。

(function(timer) {
  window.addEventListener('load', function() {
    var el = document.querySelector('.inner');
    el.addEventListener('scroll', function(e) {
    (function(el){
      el.classList.add('scroll');
      clearTimeout(timer);
      timer = setTimeout(function() {
        el.classList.remove('scroll');
      }, 100);    
    })(el);
    })
  })
})();

.outer {
  height: 180px;
  width: 500px;
  border: 1px solid green;
  overflow: hidden;
}

.inner {
  width: 100%;
  height: 99%;
  overflow: auto;
  padding-right: 20px;
}
.inner.scroll {
  padding-right: 0;
}

<div class="outer">
  <div class="inner">
    Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some
    content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some
    content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
  </div>
</div>

Answer 2

这是一个自动功能，

您可以尝试设置：

overflow : scroll;

强制它按你的意愿工作。

您还可以尝试overflow-x或overflow-y，具体取决于您滚动的轴。

Answer 3

扩展此问题：Hide scroll bar, but still being able to scroll。

你可以像这样使用这个技巧：

document.getElementById("child").addEventListener("scroll", myFunction);

function myFunction() {
    document.getElementById("child").style.paddingRight = '0px';
}

#parent {
    border: 1px solid black;
    width: 500px;
    height: 100px;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 20px; /* Increase/decrease this value for cross-browser compatibility */
}

<div id="parent">
  <div  id="child">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  </div>
</div>

基本上它的作用是删除填充右侧像素，并在子元素上检测到滚动时显示滚动条。

糟糕的是，您需要使用填充右侧像素来实现浏览器兼容性。

Answer 4

考虑使用

overflow : auto;

如果剪辑溢出，则应添加滚动条以查看其余内容

Answer 5

仅使用css尝试这个简单的解决方案：

function copydata() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var source_sheet = ss.getSheetByName("Data Entry");
  var target_sheet = ss.getSheetByName("Data");
  var last_row = target_sheet.getLastRow();

  var ar = [];
  var data = source_sheet.getRange("B6:AB32").getValues(); // Here, all data is retrieved. The rows are obtained from "var row = 6" and "for (var i = 0; i< 27; i++){".
  data.forEach(function(e){
    if (!~e.indexOf("Listing Agent")) {
      var temp = [];
      if (e[e.length - 1] == 0) {
        temp = e.slice(0, 22); // Here, data of "B" + row + ":W" + row is retrieved.
        ar.push(temp);
      }
    }
  });
  target_sheet.getRange(last_row + 1, 1, ar.length, ar[0].length).setValues(ar);

  ss.setActiveSheet(source_sheet);
  source_sheet.getRange('C2').clearContent();
  ss.setActiveSelection("C2");
  Browser.msgBox("Your data has been moved.");
}

页面在css中滚动时仅显示滚动条

5 个答案: