javascript - How to display horizontal scrollbar without go down to the page - Stack Overflow

admin管理员组

文章数量:1313598

I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar?

I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 20, 2019 at 13:12 BenMorel 36.6k5151 gold badges205205 silver badges336336 bronze badges asked Feb 25, 2016 at 9:14 vellattukudyvellattukudy 78922 gold badges1212 silver badges2727 bronze badges 2

• you can use overflow:scroll; – Mitali Commented Feb 25, 2016 at 9:17
• Can you show us any kind of code? You probably have overflow-x on the .well element and overflow-y on the body. But you should create well with height:100% and then it should work – Timo Commented Feb 25, 2016 at 9:25

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

If you have your data inside a block element in div and you want user dont need to go all the way down to find his scroll bar, then give it hyperlink " href="divid". when user will land on that page from any link http://exampl/#divid it will land to that div automatically.

If you have your data inside a block element in HTML, you can give it a fixed height using the css height property. And then use overflow-x property to add horizontal scroll bar.

.well {
   height: 200px;
   overflow-x: scroll;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
div { white-space: pre; }

section {
  max-height: 100%;
  overflow: auto;
}

<section>
<h1>Some content</h1>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
</section>

  
<section>
<h1>Some content</h1>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
<div>
Hi guys I have a webpage contains 100s of data listed vertically and horizontally. I have a css code for scroll bar as follows:

.well {
  overflow: auto;
}

User always need to scroll down to find the horizotal scroll bar. Is there anyway to prevent it, so that user dont need to go all the way down to find his scroll bar? Any idea guys? Thanks in advance.
</div>
</section>

You can use overflow-x: scroll or overflow: scroll

https://jsfiddle/h4bjLL0g/

body {
   overflow-x: scroll;
}

.well {
    height: 400px;
    overflow-x: scroll;
 }

You need to calculate space left on the screen and than adjust element height to fit it. Below is a code, it may require some fiddling, but it's working in basic situations. Also remember to call it on resize event, to adjust to such situations:

const element = document.getElementById('specialElement');
const elementSize = element.getBoundingClientRect();
const elementStyle = window.getComputedStyle(element);
const windowHeightValue = window.innerHeight;
const elementHeight = windowHeightValue - elementSize.top - 2 * parseInt(elementStyle.marginTop, 0);
element.style.height = elementHeight + 'px';

Element parent has to have horizontal scrolling enabled. And element should be the element that goes off the charts.

本文标签： javascriptHow to display horizontal scrollbar without go down to the pageStack Overflow