use browser scrollbar instead

• 

  coreyhusic · Member · July 17, 2018 at 3:45 pm

  • Copy link
  • Add topic to favorites

  I have been frustrated with the scrollbar in the theme and would prefer to use the browser scrollbar instead. I found one way to do this in these forums, but that method messed up column widths, making the website unusable on mobile. Is there a way to get rid of the theme scrollbar without affecting the column widths?

  The blog I need help with is: (visible only to logged in users)

• 

  vivawpthemes · Theme Author · July 18, 2018 at 7:02 am

  • Copy link

  Hi,

  Can you please let me know what is the problem you are having? The custom scrollbar is integrated in the theme, not possible to remove.

  Thanks,
  Edy

• 

  coreyhusic · Member · July 20, 2018 at 8:00 pm

  • Copy link

  It is very slow, for one thing. Sometimes when I try to scroll down on a page using the trackpad on my laptop, both the theme scrollbar and the browser scrollbar try to go, and the page either gets stuck or scrolls very fast past what I was trying to look at.

• 

  coreyhusic · Member · July 20, 2018 at 8:04 pm

  • Copy link

  Another major issue is that scrolling using the theme scroll bar does NOT work when the cursor is over an emeded video. So, if there is a video partway down a page, it is impossible to scroll to the bottom without knowing to move the cursor to the side to resume scrolling.

• 

  vivawpthemes · Theme Author · July 23, 2018 at 9:18 am

  • Copy link

  Both scrollers trying to go happens because you are logged in, so you have a top bar with user setting thus ruining the 100% height of the website. Your visitor does not see this though.

  Not scrolling over iFrames (ie YouTube) seems like a browser limitation, a browser bug with custom scrollers. I will look and see if I can find a solution.

  Thanks,
  Edy

• 

  vivawpthemes · Theme Author · July 23, 2018 at 9:37 am

  • Copy link

  However, I can give you a workaround to disable custom scrollbar for the content area, please use the following css code

  #header {
      position: fixed;
      -webkit-transform: translateZ(0);
      width: 19.5%;
  }
  
  #content {
  	height: auto !important;
  	margin-bottom: 0 !important;
  	min-height: 98vh;
  }
  
  .contentwrapper {
  	height: auto !important;
  	margin-left: 24%;
  }
  
  button.collapse {display:none;}

  Thanks,
  Edy